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

本文介绍了一种使用CSS解决HTML表格中空单元格边框不显示的问题的方法。通过设置table和td的样式,确保即使单元格为空也能正常显示边框。

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

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

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

正确的解决方法:

用css来控制,代码如下:

table
{
border-collapse:collapse;
}

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

### 解决方案 在CSS中,若想让表格单元格(`td`)的内容在溢出显示省略号,需要正确设置多个属性以确保效果生效。以下是实现该功能的完整方法和相关代码示例。 #### 核心CSS属性 1. **`table-layout: fixed;`** 设置表格布局为固定宽度模式,这是实现`text-overflow: ellipsis;`在表格单元格中生效的关键条件之一[^1]。 2. **`white-space: nowrap;`** 禁止内容换行,强制文本在一行内显示[^4]。 3. **`overflow: hidden;`** 隐藏超出容器边界的内容[^4]。 4. **`text-overflow: ellipsis;`** 当内容溢出,用省略号表示被截断的部分[^4]。 5. **`width`或`max-width`** 明确指定单元格的宽度,否则无法触发溢出效果[^1]。 #### 示例代码 以下是一个完整的HTML和CSS代码示例,展示如何在表格中实现`td`内容溢出显示省略号的效果。 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Table TD Overflow with Ellipsis</title> <style type="text/css"> table { table-layout: fixed; /* 固定表格布局 */ width: 100%; /* 设置表格宽度 */ border-collapse: collapse; /* 去除表格边框间距 */ } td { border: 1px solid #ccc; /* 添加边框以便观察 */ white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 隐藏超出部分 */ text-overflow: ellipsis; /* 溢出显示省略号 */ max-width: 150px; /* 设置最大宽度 */ padding: 5px; /* 内边距 */ } </style> </head> <body> <table> <tbody> <tr> <td>这是一个非常长的文字内容,用于测试表格单元格中的文本溢出效果。</td> </tr> <tr> <td>短文本</td> </tr> </tbody> </table> </body> </html> ``` #### 注意事项 - 如果未设置`table-layout: fixed;`,即使其他属性都正确配置,`text-overflow: ellipsis;`可能仍然会生效[^1]。 - `td`的宽度可以通过`width`或`max-width`来控制,但必须明确指定一个值[^4]。 - 在某些浏览器中,`td:hover`可以用来在鼠标悬停显示完整内容,例如通过设置`overflow: visible;`和`text-overflow: inherit;`[^4]。 #### 浏览器兼容性 上述方法在现代主流浏览器(如ChromeFirefox、Edge等)中均能正常工作[^2]。但在较旧版本的浏览器中可能存在兼容问题,需根据实际需求进行测试。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值