html - 行スパンが存在するときに行の境界線を追加する最も簡単な方法は?

Question

私はtable、半分の細胞がrowspan="2"あり、残りの半分はそうではありません。デモを参照してください。

各「実際の」行の間に境界線が必要です。つまり、H1 と H2 の場合、すべての行に配置する必要があります。ただし、H3 と H4 の場合は、1 行おきに配置する必要があります。

CSS を使用してこれを行う最もエレガントな方法は何ですか? これを機能させるために、すべてにクラス名を付ける必要はありませんtd...

Answer 1

独自のフィドルから始めて、セレクターを に変更するだけです。テーブルとセルの境界線の幅が異なるため、結果として得られる下部の境界線は均一ではありませんが、これも簡単に修正できます。(even)(odd)

Answer 2

とを使用して、ヘッダーを実際の行から分離するだけです。次に、行のみをスタイルします。もちろん、ヘッダーのスタイルを変更することもできますが、表のヘッダーをコンテンツから分離するマークアップは適切です。<thead><tbody><tbody>

<table>
    <thead>
        <tr>
            <th>H1</th>  
            <th>H2</th> 
            <th>H3</th> 
            <th>H4</th>  
        </tr>        
    </thead>
    <tbody>
        <tr>
          <td rowspan="2">1</td>
          <td rowspan="2">2</td>
          <td>3a</td>
          <td>4a</td>
        </tr>
        ...

/* Style in question: */
tbody tr:nth-child(even) {
    border-bottom: 2px solid #BBB;
}