tr元素周围的边框没有显示？

107

似乎Chrome / Firefox无法在tr其上显示边框，但是如果选择器为，则可以渲染边框table tr td。

如何在tr上设置边框？

我的尝试不起作用：

table tr {
  border: 1px solid black;
}

<table>
  <tbody>
    <tr>
      <td>
        Text
      </td>
    </tr>
  </tbody>
</table>

html css html-table

— edi9999
source

我正在使用firefox，但没有看到边框

— Speedysnail6 2013年

255

将此添加到样式表：

table {
  border-collapse: collapse;
}

规范中实际上很好地描述了这种行为的原因：

有两种不同的模型可以在CSS的表格单元格上设置边框。一个最适合单个单元格周围的所谓分隔边框，另一个最适合从表的一端到另一端连续的边框。

...及更高版本，用于collapse设置：

在折叠边框模型中，可以指定围绕单元格，行，行组，列和列组的全部或部分的边框。

— Raina77ow
source

为什么边界被完全隐藏了？

— edi9999

因为separate-默认-表边框模型是这样工作的：您为每个单元格指定边框。我将使用文档中的引号来更新答案。

— raina77ow 2013年

@ edi9999-我建议使用重置样式表。看看这个http://www.cssreset.com/

— 黑羊》

为何隐藏边框的具体说明是引用的CSS规范中的以下声明，该声明在分隔的边框模型中适用：“行，列，行组和列组不能具有边框（即，用户代理必须忽略边框）这些元素的属性）。”

— Jukka K. Korpela 2014年

玩你的提琴手例子

— 很有帮助