`
gaojin
  • 浏览: 44124 次
  • 性别: Icon_minigender_1
  • 来自: 湖北
社区版块
存档分类
最新评论

解决Td内容为空时不显示边框的问题-兼容IE、firefox、chrome

    博客分类:
  • CSS
 
阅读更多

创建好table,给table、td等设置好边框后,无意间发现td里没有内容的时候,边框竟然不会显示。开始的时候很懒,就在每个td里都先加一个空格, 然后再把内容加到这个空格后面,这些,就算本身没有内容,但是有了空格,边框就会被显示。

千万不要学习上面这种处理方法及处理态度

遇到问题还是要找直接的解决方法,而不是找空子。上面这种方法虽然解决了问题,但是代码看起来很乱,而且如果你用的表格多了,每个地方都这样,迟早会烦死。

正确的解决方法:

用css来控制,代码如下:

table
{
border-collapse:collapse;
}

table td
{
empty-cells : show;
}
原文:http://blog.csdn.net/xiongzhengxiang/article/details/6691941

分享到:
评论

相关推荐

    最新web面试题css浏览器的兼容性问题.docx

    不同的浏览器,尤其是IE系列与其他现代浏览器(如Firefox、Chrome、Safari和Opera),在解析CSS规则时可能存在差异,导致页面显示效果不一致。以下是一些关于CSS浏览器兼容性的关键知识点: 1. **对齐文本和文本...

    各浏览器兼容问题

    本文详细介绍了在进行网页开发时遇到的浏览器兼容问题及解决方案,包括了CSS Hack技术、CSS3兼容性处理、透明度设置、清除浮动、Reset CSS等内容。通过对这些知识点的学习和应用,可以有效提升网站在不同浏览器环境...

    帖子内容显示外加边框

    这可能需要进行跨浏览器测试,如Chrome, Firefox, Safari, 和 Edge等,以及在桌面和移动设备上的适配性检查。 5. 用户反馈:最后,用户反馈对于优化和改进这种边框显示功能至关重要。管理员应密切关注用户对新边框...

    浏览器兼容问题

    **问题描述**:在 Opera 和 Firefox 中,`td` 的高度包含边框宽度,但在其他浏览器中并不包含。 **解决方案**:设置 `line-height` 和 `height` 相同。 ```css .table-cell { line-height: 20px; height: 20px; ...

    angular浏览器兼容性问题解决方案.docx

    现代浏览器如 Chrome、Firefox 及其他基于 `-webkit-` 内核的浏览器均支持 `sticky` 属性,但在 IE 浏览器中却不支持。Edge 浏览器从 1703 版本开始使用了 Chromium 内核,虽然支持 `sticky` 属性,但由于某些实现...

    firefox下rowspan+border+border-collapse的bug

    根据所给文件内容描述,当在firefox浏览器下使用rowspan、border以及border-collapse:collapse组合时,中间行的单元格边框表现与预期不同,即中间行的边框样式未能正确显示。具体问题在于Firefox浏览器中表格边框...

    jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera

    本篇文章将详细介绍如何利用jQuery实现这一功能,支持包括IE、Firefox、Safari、Chrome和Opera在内的主流浏览器。 首先,我们需要创建一个基本的HTML表格结构,如Code1所示,包含表头(thead)和数据区域(tbody)...

    各种浏览器的默认css 样式

    本文将详细探讨各种浏览器,包括IE(Internet Explorer)的多个版本、Firefox(火狐)等,它们对CSS样式的默认处理方式。 一、IE浏览器的默认CSS样式 1. 文本样式:IE倾向于将文本的默认字体设为宋体或Arial,字体...

    jquery的flexigrid无法显示数据提示获取到数据

    2. IE10浏览器兼容性问题:IE10是一款较新的浏览器,虽然提供了很多新的功能和改进,但也可能引发一些新的兼容性问题。例如,某些基于jquery的插件在IE10中可能无法正常工作。 3. jquery的addData方法:jquery的add...

    HTML 第八章 Table局部布局与浏览器兼容性

    例如,Internet Explorer与Firefox、Chrome等浏览器对某些属性的支持程度不同。因此,我们需要了解CSS hack和条件注释等技术,以确保在各种浏览器中都能正常显示。 6. **Firebug工具**:压缩包中的“firebug各版本...

    table 圆角 html5 css3

    例如,对于老版本的Firefox,我们需要使用`-moz-border-radius`,对于Webkit内核的浏览器(如Chrome和Safari),使用`-webkit-border-radius`。完整的代码可能如下所示: ```css table { border-collapse: ...

    纯CSS实现表头固定表格滚动条效果

    在网页设计中,当表格数据过多时,为了保持可读性,通常会使用滚动条来显示隐藏的内容。然而,一个常见的需求是使表格的表头在滚动时始终保持可见,这样用户在浏览长表格时仍能清楚地看到列名。本文将详细介绍如何仅...

    web前端开发笔记5月27日

    - Mozilla Firefox 的内核。 - 特点:代码完全开放,支持全球开发者贡献。 - 缺点:打开速度较慢,频繁升级。 3. **WebKit (苹果 Safari)** - 苹果 Safari 浏览器使用的内核。 - 名声显赫,广泛应用于移动设备...

    HTML、JavaScript与Java三合一培训教程.

    - `ALT`属性:提供替代文本,当图像无法加载时显示。 - 确定图像边距的属性:`hspace`和`vspace`。 - `BORDER`属性:定义图像边框宽度。 - `ISMAP`属性:将图像用作服务器端映射的一部分。 - **列表、表格和...

    html-js数据导出excel表

    这通常意味着开发者需要处理不同浏览器之间的差异,以确保代码在Chrome、Firefox、Safari、Edge以及旧版IE等浏览器上都能正常工作。 首先,`htmlExportToExcel.html`是主页面,它可能包含了一个HTML表格,用于展示...

    兼容浏览器的css网页细线表格设计

    4. **测试**:在多种浏览器和设备上进行测试,包括但不限于Chrome、Firefox、Safari、Edge和Internet Explorer,确保表格在所有目标平台上都能正常显示。 通过以上方法,我们可以创建出一款既美观又具有高度兼容性...

    HTML实现打印简单报表(轻量级)

    - 需要考虑不同浏览器的兼容性问题,测试在主流浏览器(如Chrome、Firefox、Safari和Edge)中的表现。 - 对于复杂的报表布局,可能需要使用CSS Flexbox或Grid来实现更灵活的排版。 - 考虑屏幕阅读器和辅助技术的...

    仅限于自己用的web前端面试题

    - **Gecko**:被 Firefox 使用。 - **Trident**:被 Internet Explorer 使用。 - **Blink**:基于 WebKit 开发,由 Chrome 和 Opera 使用。 - 不同的浏览器内核对标准的支持程度有所不同,这也导致了跨浏览器兼容...

    纯CSS实现的表格滚动条效果

    请注意,以上CSS代码仅适用于基于Webkit内核的浏览器(如Chrome和Safari),对于Firefox和其他非Webkit浏览器,可能需要使用其他方法或者额外的JavaScript库来实现兼容性。然而,随着浏览器对CSS3特性的支持越来越...

Global site tag (gtag.js) - Google Analytics