Question

似乎Chrome / Firefox不会在tr上呈现边框，但如果选择器为table tr td，则会呈现边框。

如何在tr上设置边框？

我的尝试，这不起作用：

table tr {
  border: 1px solid black;
}

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

这是一个类似的问题：Set border to table tr, works in everything except IE 6 & 7，但除了IE之外，它似乎无处不在。

Answer 1

将其添加到样式表中：

table {
  border-collapse: collapse;
}

the specification实际上很好地描述了它以这种方式运行的原因：

有两种不同的模型可用于设置表格单元格的边框 CSS。一种最适合所谓的分离边界单个细胞，另一个适合边界从桌子的一端到另一端连续。

...以及稍后，collapse设置：

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