表中特定行的边框？
我正在尝试设计一些HTML/CSS，可以在表格中的特定行周围放置边框。是的，我知道我真的不应该使用表格进行布局，但我还不知道足够多的CSS来完全取代它。
不管怎样，我有一个包含多行和多列的表，其中一些行和列合并了rowspan和colspan，我想在表的某些部分周围加上一个简单的边框。目前，我使用4个独立的CSS类(顶部、底部、左侧、右侧)，分别附加到表格顶部、底部、左侧和右侧的<td>单元格。
.top {
border-top: thin solid;
border-color: black;
}
.bottom {
border-bottom: thin solid;
border-color: black;
}
.left {
border-left: thin solid;
border-color: black;
}
.right {
border-right: thin solid;
border-color: black;
}<html>
<body>
<table cellspacing="0">
<tr>
<td>no border</td>
<td>no border here either</td>
</tr>
<tr>
<td class="top left">one</td>
<td class="top right">two</td>
</tr>
<tr>
<td class="bottom left">three</td>
<td class="bottom right">four</td>
</tr>
<tr>
<td colspan="2">once again no borders</td>
</tr>
<tr>
<td class="top bottom left right" colspan="2">hello</td>
</tr>
<tr>
<td colspan="2">world</td>
</tr>
</table>
</html>
有没有更简单的方法来做我想做的事情？我尝试将顶部和底部应用于<tr>，但它不起作用。(附注：我是CSS的新手，所以我可能错过了一个非常基本的解决方案。)
注意：我确实需要有多个带边框的部分。基本思想是拥有多个有边界的集群，每个集群包含多个行。
回答 10
Stack Overflow用户
发布于 2013-06-05 00:16:05
那tr {outline: thin solid black;}呢？我可以在tr或tbody元素上工作，appears可以兼容大多数浏览器，包括IE 8+，但在此之前不行。
Stack Overflow用户
发布于 2009-03-22 04:55:32
感谢所有回复的人！我已经尝试了这里提出的所有解决方案，我在互联网上做了更多的搜索，寻找其他可能的解决方案，我想我已经找到了一个很有前途的解决方案：
tr.top td {
border-top: thin solid black;
}
tr.bottom td {
border-bottom: thin solid black;
}
tr.row td:first-child {
border-left: thin solid black;
}
tr.row td:last-child {
border-right: thin solid black;
}<html>
<head>
</head>
<body>
<table cellspacing="0">
<tr>
<td>no border</td>
<td>no border here either</td>
</tr>
<tr class="top row">
<td>one</td>
<td>two</td>
</tr>
<tr class="bottom row">
<td>three</td>
<td>four</td>
</tr>
<tr>
<td colspan="2">once again no borders</td>
</tr>
<tr class="top bottom row">
<td colspan="2">hello</td>
</tr>
<tr>
<td colspan="2">world</td>
</tr>
</table>
</body>
</html>
输出：
不必向每个代码添加top、bottom、left和right类，我所要做的就是将top row添加到顶部代码，将bottom row添加到底部代码，并将< <td> >d14top row>添加到两者之间的每个< <tr> >d15<tr> >中。这个解决方案有什么问题吗？有没有我应该注意的跨平台问题？
Stack Overflow用户
发布于 2012-11-22 19:12:24
如果您在父表上将border-collapse样式设置为collapse，您应该能够设置tr的样式：(样式是内联的，用于演示)
<table style="border-collapse: collapse;">
<tr>
<td>No Border</td>
</tr>
<tr style="border:2px solid #f00;">
<td>Border</td>
</tr>
<tr>
<td>No Border</td>
</tr>
</table>输出：
https://stackoverflow.com/questions/670424
复制相似问题