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

Posted 2023-03-05

【中文标题】tr 元素周围的边框不显示？

【英文标题】：Border around tr element doesn't show?

【发布时间】：2013-09-11 19:23:30

【问题描述】：

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

如何在 tr 上设置边框？

我的尝试，不起作用：

table tr 
  border: 1px solid black;

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

http://jsfiddle.net/edi9999/VzPN2/

这是一个类似的问题：Set border to table tr, works in everything except IE 6 & 7，但它似乎在除 IE 之外的任何地方都有效。

【问题讨论】：

我使用的是 firefox，但没有看到边框

【参考方案1】：

将此添加到样式表中：

table 
  border-collapse: collapse;

JSFiddle.

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

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

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

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

【讨论】：

为什么边框被隐藏了？

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

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

对隐藏边框的具体解释是引用的 CSS 规范中的这句话，在分离边框模型中应用：“行、列、行组和列组不能有边框 (即，用户代理必须忽略这些元素的边框属性）。”

玩你的提琴手的例子有帮助，谢谢;)