html - 每 2 行后制作一个 html 表格的粗边框

Question

我创建了一个包含一些内容的表格，其中有 12 行和 2 列。我想显示边框，但每 4 行后，我想设置比正常更厚的水平边框。怎么做？请在这里帮忙。

Answer 1

试试这个选择器

table tr:nth-of-type(4n) td {
    border-bottom: 3px solid #f00;
}

说明：我们首先table在这里选择元素，然后使用:nth-of-type(4n)我们选择该表中的每 4 行，最后我们选择td第 4 行中的元素并将样式应用于该元素。如果你想在顶部和底部有边框，你可以使用border-bottom,属性，或者只是使用在元素的所有侧面都有边框border-topbordertd

演示

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

Answer 2

使用 css nth-child 选择器：

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