我有一个3 × 3的表。我需要一种方法为每一行tr的底部添加边界，并给它一个特定的颜色。
首先，我尝试了直接的方式，即:
<tr style="border-bottom:1pt solid black;">
但这并没有起作用。所以我添加了这样的CSS:
tr {
border-bottom: 1pt solid black;
}
但还是不管用。
我更喜欢使用CSS，因为这样我就不需要为每一行添加一个样式属性。 我还没有添加一个边界属性到<表>。我希望这不会影响我的CSS。
当前回答
Use
table{border-collapse:collapse}
tr{border-top:thin solid}
将“thin solid”替换为CSS属性。
其他回答
无CSS边框底部:
<table>
<thead>
<tr>
<th>Title</th>
</tr>
<tr>
<th>
<hr>
</th>
</tr>
</thead>
</table>
如果你不想的话
在桌面上执行边界崩溃 使用TD元素样式
你可以使用::after选择器为TR添加边框:
table tbody tr {
position : relative; # to contain the ::after element within the table-row
}
table tbody tr td {
position : relative; # needed to apply a z-index
z-index : 2; # needs to be higher than the z-index on the tr::after element
}
table tbody tr::after {
content : '';
position : absolute;
z-index : 1; # Add a z-index below z-index on TD so you can still select data from your table rows :)
top : 0px;
left : 0px;
width : 100%;
height : 100%;
border : 1px solid green; # Style your border here, choose if you want a border bottom, top, left, etc ...
}
这是一个简单的技巧，我在一个场景中使用，我必须在表行之间放置空格，这样我就不能在表上添加边界折叠，最终结果:
希望能有所帮助。
将行显示为块。
tr {
display: block;
border-bottom: 1px solid #000;
}
简单地显示交替颜色:
tr.oddrow {
display: block;
border-bottom: 1px solid #F00;
}
您可以使用box-shadow属性来模拟tr元素的边界。调整box-shadow的Y位置(下面表示为2px)来调整厚度。
tr {
-webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
-moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}
使用border-collapse:折叠桌面和边框底部:1pt纯黑色;在电话里
