我创建了一张表格,并添加了一些内容,该表格有12行2列。我想要显示边框,但每隔4行,我想将横线设置为比普通线条更粗的线条。如何实现呢?请帮忙解决。
table tr:nth-of-type(4n) td {
border-bottom: 3px solid #f00;
}
table
元素,然后通过使用:nth-of-type(4n)
选择表格中每四行一次的行,在最后选择该行中的td
元素并对其应用样式。如果您想要在顶部和底部拥有边框,则可以使用border-bottom
、border-top
属性,或者只需使用border
在td
元素的所有边框上添加边框。
演示2(CSS规范化)
这样,您就不必声明任何类了。
HTML(如果有人需要)
<table>
<tr>
<td>First</td>
<td>Second</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
</tr>
</table>
table.class_name tr:nth-of-type(4n) td {
/* Styles */
}
#your-table .table-row:nth-child(4n) {
border-bottom-width: 4px;
}