Html 如何在 tr 标签周围放置边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7655886/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I put a border around a tr tag?
提问by Mykroft
I have a very simple html page:
我有一个非常简单的 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>
With some simple css:
用一些简单的css：
tr {
border:1px solid blue;
}
I would expect this to put a border around the trs but it doesn't put a border around it at all. How do I get a border around the tr?
我希望这会在trs周围放置一个边框，但它根本没有在它周围放置一个边框。我如何在 周围获得边界tr？
回答by Daniel Brockman
Add table { border-collapse: collapse; }.
添加table { border-collapse: collapse; }.
From the CSS2 specification:
从CSS2 规范：
In [the
border-collapse: separatemodel], each cell has an individual border. [...] Rows, columns, row groups, and column groups cannot have borders (i.e., user agents must ignore the border properties for those elements).
在[
border-collapse: separate模型]中，每个单元格都有一个单独的边框。[...] 行、列、行组和列组不能有边框（即，用户代理必须忽略这些元素的边框属性）。
回答by Vineet Kapoor
Borders can be added to rows of table by adding border to <td>and <th>elements [This is basically a CSS trick to achieve (hack!) that as borders cannot be added to <tr> and <tbody> elements of table]. Add following styles to your CSS to get borders around rows or headers or table cells.
通过向<td>和<th>元素添加边框，可以将边框添加到表格的行中[这基本上是一个 CSS 技巧来实现（hack！），因为边框不能添加到表格的 <tr> 和 <tbody> 元素]。将以下样式添加到您的 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);
}
Explanation:
解释：
- border-collapse rule is added to whole table. It can have two other possible properties separate (default) and inherit. For their respective effects refer https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
- Second rule i.e. adding border property to <td> (for data cells) and <th> (for header cells) is a must. If you don't add it, borders will not show up. In this rule border-color is white, it can be some other color of your choice instead of white. Basically, this rule will activate the borders around table cells and since the color is white nothing will show up.
- And finally, add the color of your choice. This rule can be more specific to apply border to one <td> or a class of <td>.
- 边框折叠规则被添加到整个表格。它可以有两个其他可能的属性分开（默认）和继承。它们各自的效果参考https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
- 第二条规则，即向 <td>（对于数据单元格）和 <th>（对于标题单元格）添加边框属性是必须的。如果不添加它，边框将不会显示。在此规则中，border-color 是白色，它可以是您选择的其他颜色而不是白色。基本上，此规则将激活表格单元格周围的边框，并且由于颜色为白色，因此不会显示任何内容。
- 最后，添加您选择的颜色。此规则可以更具体地将边框应用于一个 <td> 或一类 <td>。
回答by Jason Gennaro
Your code works, if you want a borderjust on the row.
你的代码有效，如果你想要一个border就行。
However, if you are looking to have the bordereverywhere, you will need to do this:
但是，如果您希望拥有border无处不在，则需要执行以下操作：
tr, td, th{
border:1px solid blue;
}
