每隔两行加粗HTML表格边框

Question

我创建了一张表格，并添加了一些内容，该表格有12行2列。我想要显示边框，但每隔4行，我想将横线设置为比普通线条更粗的线条。如何实现呢？请帮忙解决。

- madzacky

---

请发表相关代码。 - Mr_Green

Answer 1

尝试使用这个选择器。

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 */
}

- Mr. Alien

Answer 2

使用CSS中的nth-child选择器：

#your-table .table-row:nth-child(4n) {
    border-bottom-width: 4px;   
}

- Stefan Fandler