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

zengzsys  于 2023-06-25  发布在  其他
关注(0)|答案(2)|浏览(174)

警告-此问题已超过10年。今天,这不再是一个问题。这个问题仍然是历史原因。

这是一个典型的问题-当你有一个空的表格单元格时,浏览器不会呈现它周围的边框。还有两个众所周知的解决方法。一种是在表格单元格中放置一个 ;另一种是使用empty-cells:show CSS属性。
不幸的是,两者都有缺点。 在选择文本和复制粘贴时有点难看。你会得到很多不应该有空格的地方,甚至可能是一个外来的Unicode字符。empty-cells:show应该可以解决这个问题,但不幸的是,它只能在IE 8版开始的版本中正常工作(然后只能在标准兼容模式下工作)。通过指定border-collapse: collapse,它可以在其他版本中工作,但有时这并不是所希望的。在我的例子中,我有一个相当复杂的表,它依赖于border-collapse:separate,否则会创建一个相当混乱的CSS/HTML汤。
那么,还有哪些东西可以放在表格单元格中,使IE绘制边框,但不可见或不可复制?对于所有其他浏览器,empty-cells:show已经做到了这一点,所以我真的只需要愚弄IE。

gajydyqb

gajydyqb1#

您也可以放置不可见br元素:

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

这是荒谬的大量不必要的代码,但它使技巧-没有额外的文本添加尚未显示单元格。
请注意,<br/>是无效的HTML语法,根据官方规范http://www.w3.org/TR/html401/struct/text.html#edef-BR,它是有效的XHTML语法。

j2cgzkjk

j2cgzkjk2#

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

相关问题