Html 如何为 <tbody> 元素设置边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18989958/
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 to set border to <tbody> element?
提问by George
Why doesn't the border show around tbodyin the following? I tried rules="groups"and the border appears, but only between the two tbodysections and it is collapsed.
为什么边框不显示tbody在下面？我试过rules="groups"了，边框出现了，但只在两个tbody部分之间，它是折叠的。
table.sectioned tbody {
border: 2px solid black;
border-collapse: separate;
border-spacing: 4px;
}<table class="sectioned">
<tbody>
<tr><td colspan="2"><b>General Data</b></td></tr>
<tr><td>Tail Number</td><td>N0809021</td></tr>
<tr><td>Type of Ownership</td><td>personal</td></tr>
<tr><td>Type of Aircraft</td><td>aircraft under 13,000 pounds</td></tr>
<tr><td>Year of Manufacture</td><td>1999</td></tr>
<tr><td>Use of Aircraft</td><td>private</td></tr>
<tr><td>Start Date</td><td></td></tr>
<tr><td>Policy Length</td><td>6 months</td></tr>
</tbody>
<tbody>
<tr><td colspan="2"><b>Additional Aircraft Information</b></td></tr>
<tr><td>Manufacturer</td><td></td></tr>
<tr><td>Model</td><td></td></tr>
<tr><td>Engine Make</td><td></td></tr>
<tr><td>Number of Seats</td><td></td></tr>
</tbody>
</table>回答by Brian Kinyua
回答by Stickers
Use box-shadowinstead of border. It works no matter which value of border-collapsewas applied. In addition, you can also apply border-radiusto it.
使用box-shadow代替border。无论应用哪个值，它都有效border-collapse。此外，您也可以申请border-radius它。
tbody {
box-shadow: 0 0 0 1px black;
border-radius: 5px;
}<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Hymanson</td>
</tr>
</tbody>
</table>回答by Ahmad Ajaj
.table_body, .tbody_td, .tbody_th
{ border: 1px solid black; }
.table_body { border-collapse: collapse; }
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody class="table_body">
<tr>
<td class="tbody_td">Jill</td>
<td class="tbody_td">Smith</td>
</tr>
<tr>
<td class="tbody_td">Eve</td>
<td class="tbody_td">Hymanson</td>
</tr>
</tbody>
</table>
