Question

我有一个非常简单的html页面：

<table>
     <tr><th>header1</th><th>header2</th></tr>
     <tr><td>item1</td><td>item2</td></tr>
     <tr><td>item3</td><td>item4</td></tr>
</table>

使用一些简单的css：

tr {
    border:1px solid blue;
}

我希望这会在tr附近设置一个边框，但它根本不会在它周围放置边框。如何在tr附近找到边框？

Answer 1

添加table { border-collapse: collapse; }。

来自the CSS2 specification：

在[border-collapse: separate模型]中，每个单元格都有一个单独的边框。 [...]行，列，行组和列组不能有边框（即，用户代理必须忽略这些元素的边框属性）。

Answer 2

如果你想在行上border，你的代码就可以了。

但是，如果您希望到处都有border，则需要执行此操作：

tr, td, th{
    border:1px solid blue;
}

示例：http://jsfiddle.net/jasongennaro/83VjH/

Answer 3

通过向＆lt; td＆gt; 和＆lt; th＆gt; 元素添加边框，可以将边框添加到表格行中[这基本上是一个CSS技巧实现（黑客）！）因为边框无法添加到＆lt; tr＆gt;和＆lt; tbody＆gt;表的元素]。将以下样式添加到CSS以获取行或标题或表格单元格周围的边框。

table {
    border-collapse: collapse;
}
table td, table th {
    border: solid white;
}
td {
    border-color: red (just an example, can be as per your requirement);
}

说明：

border-collapse规则被添加到整个表中。它可以有两个其他可能的属性分开（默认）和继承。有关各自的影响，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
第二条规则，即将边界属性添加到＆lt; td＆gt; （对于数据单元）和＆lt; th＆gt; （对于标题单元格）是必须的。如果您不添加，则不会显示边框。在此规则中，边框颜色为白色，可以是您选择的其他颜色而不是白色。基本上，此规则将激活表格单元格周围的边框，因为颜色为白色，所以不会显示任何内容。
最后，添加您选择的颜色。该规则可以更具体地将边界应用于一个＆lt; td＆gt;。或一类＆lt; td＆gt;。

如何在tr标签周围放置边框？

3 个答案: