我有一个3 × 3的表。我需要一种方法为每一行tr的底部添加边界,并给它一个特定的颜色。
首先,我尝试了直接的方式,即:
<tr style="border-bottom:1pt solid black;">
但这并没有起作用。所以我添加了这样的CSS:
tr {
border-bottom: 1pt solid black;
}
但还是不管用。
我更喜欢使用CSS,因为这样我就不需要为每一行添加一个样式属性。 我还没有添加一个边界属性到<表>。我希望这不会影响我的CSS。
我有一个3 × 3的表。我需要一种方法为每一行tr的底部添加边界,并给它一个特定的颜色。
首先,我尝试了直接的方式,即:
<tr style="border-bottom:1pt solid black;">
但这并没有起作用。所以我添加了这样的CSS:
tr {
border-bottom: 1pt solid black;
}
但还是不管用。
我更喜欢使用CSS,因为这样我就不需要为每一行添加一个样式属性。 我还没有添加一个边界属性到<表>。我希望这不会影响我的CSS。
当前回答
我发现在使用这种方法时,td元素之间的空间会在边界上形成一个间隙,但不用担心…
解决这个问题的一个方法是:
<tr>
<td>
Example of normal table data
</td>
<td class="end" colspan="/* total number of columns in entire table*/">
/* insert nothing in here */
</td>
</tr>
使用CSS:
td.end{
border:2px solid black;
}
其他回答
如果你不想的话
在桌面上执行边界崩溃 使用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可以直接采取边界样式。我的解决方法是在行中设置tds的样式:
<tr class="border_bottom">
CSS:
tr.border_bottom td {
border-bottom: 1px solid black;
}
<td style=" font - family:宋体;Border-bottom:粗虚线#ff0000;" >
你也可以对整行做同样的处理。
有边界底部样式,边界顶部样式,边界左样式,边界右样式。或者简单的边框样式,同时应用于所有四个边框。
你可以在这里看到(并在网上尝试一下)更多细节
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>