Question

这是一个经典问题 - 当你有一个空的表格单元格时，浏览器不会渲染它周围的边框。还有两个众所周知的解决方法。一种是在表格单元格中放置 ;另一种是使用empty-cells:show CSS属性。

不幸的是两者都有缺点。  在选择文本和复制粘贴时有点难看。你会得到很多不应该有的空间，甚至可能还有异国情调的Unicode字符。 empty-cells:show应该解决这个问题，但遗憾的是它只能在IE版本8开始正常工作（然后才能在符合标准的模式下）。通过指定border-collapse: collapse可以使其在其他版本中工作，但有时这是不希望的。在我的情况下，我有一个相当复杂的表，它依赖于border-collapse:separate，否则会创建一个混乱的CSS / HTML汤。

那么你可能会在表单元格中放置哪些其他东西会使IE绘制边框但是不可见或可复制？对于所有其他浏览器，empty-cells:show已经成功了，所以我真的只需要欺骗IE。

Answer 1

你也可以放入隐形的br元素：

<td><br style="visibility:hidden"></td>

这是一些荒谬的不必要的代码，但是这样做了 - 没有添加额外的文本但是显示了单元格。

请注意，根据官方规范http://www.w3.org/TR/html401/struct/text.html#edef-BR，<br/>是无效的HTML语法。然而，它是有效的XHTML语法。

Answer 2

您可以使用此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>

比显示空HTML表格单元格更好的选择？

2 个答案: