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>

注: 上記のセレクターは Web サイト内のすべてのテーブルを選択するため、クラスをテーブルに割り当てて、スタイルを適用する特定のテーブルを選択することをお勧めします。

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;   
}