这是一个典型的问题-当你有一个空的表单元格时,浏览器不会在它周围呈现边框。还有两个众所周知的变通方法。一种方法是在表单元格中放置
;另一种方法是使用empty-cells:show
CSS属性。
不幸的是,这两种方法都有缺点。当涉及到选择文本和复制粘贴文本时,
有点难看。您会得到许多不应该有空格的空格,甚至可能包含奇异的Unicode字符。empty-cells:show
应该解决这个问题,但不幸的是,它只有在IE版本8开始才能正常工作(然后才能在标准兼容模式下工作)。也可以通过指定border-collapse: collapse
使其在其他版本中工作,但有时这并不是我们所希望的。在我的例子中,我有一个相当复杂的表,它依赖于border-collapse:separate
,否则就会创建一个相当混乱的CSS/HTML汤。
那么,你还可以在表单元格中放入什么东西,让IE绘制出不可见或不可复制的边框呢?对于所有其他浏览器,empty-cells:show
已经做到了这一点,所以我真的只需要愚弄IE。
发布于 2010-05-07 22:57:39
您也可以放置不可见的br元素:
<td><br style="visibility:hidden"></td>
这是荒谬的数量不必要的代码,但它的把戏-没有添加额外的文本,但单元格显示。
请注意,根据官方规范http://www.w3.org/TR/html401/struct/text.html#edef-BR,<br/>
是无效的HTML语法。但是,它是有效的XHTML语法。
发布于 2015-04-27 04:14:20
您可以使用此CSS代码显示单元格。我在Safari和Firefox中成功地测试了它。我猜它在其他浏览器上也能工作。
table {
width: 100%;
border: 0;
empty-cells: show;
}
td {
border: 1px solid grey;
}
td:empty:after {
content: '.';
color: transparent;
visibility: hidden;
}
/* alternate background */
tr:nth-child(odd) td {
background: rgba(0, 0, 0, 0.2);
}
tr:nth-child(even) td {
background: rgba(0, 0, 0, 0.1);
}
<table>
<tr>
<td>Row</td>
<td>1</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>Row</td>
<td>3</td>
</tr>
</table>
https://stackoverflow.com/questions/2789372
复制相似问题