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

Question

私はtableを持ち、その半分のセルはrowspan="2"であり、残りの半分はそうではありません。 demoを参照してください。

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

CSSを使用してこれを行う最もエレガントな方法は何ですか？私は単に(odd)に(even)セレクタをchange、

Answer 1

separate your headers from the actual rows<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; 
} 

Answer 2

独自のフィドルから開始しています...ただ、この作業を取得するために、すべてのtdにクラス名を配置する必要がないことを好むだろう。結果として得られる境界線は、表とセルの境界線幅が異なるため一様ではありませんが、修正するのも簡単です。