周围的边界不显示吗？

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/

这是一个类似的问题: 设置边界为 table tr，除了 IE6和 IE7，其他都可以使用，但它似乎工作的任何地方，除了 IE。

134696 次浏览
小开
最佳答案

将下面的代码添加到样式表中:

table {
border-collapse: collapse;
}

JSFiddle .

它之所以会这样的原因在 说明书中已经描述得很好了:

中的表单元格上设置边框有两种不同的模型 一个是最适合所谓的分隔边框周围 单个单元格，另一个单元格适用于 从桌子的一端连续到另一端。

... 然后，为 collapse设置:

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

小开

除了最佳答案是什么，你还应该确保你的边框有明显的风格，例如:

border-style: solid;

如果您添加自定义样式到某些网站。

小开

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

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

提交答案