tr元素周围的边框不显示？

Question

看起来Chrome/Firefox不会渲染边框tr,但如果选择器是渲染边框则会渲染边框table tr td.

如何在tr上设置边框？

我的尝试,这不起作用:

table tr {
  border: 1px solid black;
}

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

Answer 1

将其添加到样式表:

table {
  border-collapse: collapse;
}

其行为方式的原因实际上在规范中得到了很好的描述:

在CSS中为表格单元格设置边框有两种不同的模型.一种最适合于围绕单个细胞的所谓分离边界,另一种适用于从桌子的一端到另一端连续的边界.

......以及之后的collapse设置:

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

因为这就是`separate` - default - table border model的工作原理:你为每个单元格指定边框.我将使用文档中的引号更新答案. (3认同)
为什么边界被完全隐藏了？ (2认同)
隐藏边框的原因的具体解释是引用的CSS规范中的此声明,表示为应用于分隔的边框模型:"行,列,行组和列组不能有边框(即,用户代理必须忽略边框这些元素的属性)." (2认同)

Answer 2

可以使用 css box-shadow 模拟表格边框折叠单独模式中的边框：

table tr {
  box-shadow: 0 0 4px #ccc;
}