Html 在 <tbody> 上添加边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6712946/
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
Add borders on <tbody>
提问by Paul H
In another post I read that if I need to add borders to every row except the header row I should use THEAD & TBODY. So I have added it to the page, but I cannot find how to apply it to the TBODY. I am a newbie so bear with me. I can put borders around the entire table, but need to exclude the header row. Here is a copy of a table with the border attributes in the TABLE tag where it works fine.
在另一篇文章中，我读到如果我需要为除标题行之外的每一行添加边框，我应该使用 THEAD & TBODY。所以我已经将它添加到页面中，但我找不到如何将它应用到 TBODY。我是新手，所以请多多包涵。我可以在整个表格周围放置边框，但需要排除标题行。这是在 TABLE 标记中带有边框属性的表格的副本，它可以正常工作。
<table width="300" BORDER=1 CELLPADDING=3 CELLSPACING=1 RULES=ROWS FRAME=BOX>
<thead>
<tr>
<th width="60" align="center" valign="top" scope="col">Type</th>
<th width="200" align="left" valign="top" scope="col">Address</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center" valign="top">Shipping</td>
<td align="left" valign="top">123 Main St</td>
</tr>
</tbody>
</table>
Any help is appreciated.
任何帮助表示赞赏。
回答by David says reinstate Monica
You should use CSS for presentation/styling:
您应该使用 CSS 进行演示/样式设置：
tbody {
border: 1px solid #ccc;
}
I'm not sure how new you are, but for completeness:
我不确定你有多新，但为了完整性：
<head>
<!-- other stuff -->
<style type="text/css">
tbody {
border: 1px solid #ccc;
}
</style>
<!-- other stuff -->
</head>
You could also use inline styles in the element's opening tag, for example:
您还可以在元素的开始标记中使用内联样式，例如：
<tbody style="border: 1px solid #ccc;">
Preferably, though, you'd link to an external stylesheet, this goes into the headof the document:
但是，您最好链接到外部样式表，这将进入head文档的 ：
<link href="path/to/stylesheet.css" rel="stylesheet" type="text/css" />
Or, if you're targeting those browsers that don't offer the option to style the tbodywith a border, you can target specific cells within the tbodyusing the following:
或者，如果您的目标是那些不提供tbody使用 a设置样式选项的浏览器border，您可以tbody使用以下内容来定位特定单元格：
table {
margin: 0;
border-spacing: 0;
}
tbody tr td:first-child {
border-left: 2px solid #000;
}
tbody tr td:last-child {
border-right: 2px solid #000;
}
tbody tr:first-child td {
border-top: 2px solid #000;
}
tbody tr:last-child td {
border-bottom: 2px solid #000;
}
This does, of course, require a browser that understands and implements the :last-childand :first-childpseudo-classes.
当然，这确实需要一个能够理解和实现:last-child和:first-child伪类的浏览器。
