境界線の周りに広がるテーブル

Question

こんにちは私はtdとrow spanを使用してテーブルを作成しました。今、私は太字で構造が明確な

https://plnkr.co/edit/4JM61bhjSqWR512PaWcS?p=preview

どのように私はこれを達成することができますなどの主要なカテゴリを作りたいですか？ 私は手動で各セルボーダーを1つずつ色づけなければならないのではないかと心配していますか？ボーダーと着色の属性はtdまたはtr要素のいずれかに関係しているようです。したがって、そのような効果を列全体に広げることは可能ですか？

Answer 1

はこれを試してみてください。

<tbody> 
    <tr class="colored"> 
    <td rowspan="6">A</td> 
    <td rowspan="3">B</td> 
    <td>C</td> 
    <td> Input</td> 
    <td> Input</td> 
    </tr> 
    <tr> 
    <td>D</td> 
    <td> Input</td> 
    <td> Input</td> 
    </tr> 
    <tr> 
    <td>E</td> 
    <td> Input</td> 
    <td> Input</td> 
    </tr> 
    <tr class="colored"> 
    <td rowspan="3">B</td> 
    <td>F</td> 
    <td> Input</td> 
    <td> Input</td> 
    </tr> 
    <tr> 
    <td>G</td> 
    <td> Input</td> 
    <td> Input</td> 
    </tr> 
    <tr> 
    <td>H</td> 
    <td> Input</td> 
    <td> Input</td> 
    </tr> 
</tbody> 
<tbody> 
    <tr class="colored"> 
    <td rowspan="6">A</td> 
    <td rowspan="4">B</td> 
    <td>C</td> 
    <td> Input</td> 
    <td> Input</td> 
    </tr> 
    <tr> 
    <td>D</td> 
    <td> Input</td> 
    <td> Input</td> 
    </tr> 
    <tr> 
    <td>E</td> 
    <td> Input</td> 
    <td> Input</td> 
    </tr> 
    <tr> 
    <td>F</td> 
    <td> Input</td> 
    <td> Input</td> 
    </tr> 
    <tr class="colored"> 
    <td rowspan="2">B</td> 
    <td>G</td> 
    <td> Input</td> 
    <td> Input</td> 
    </tr> 
    <tr> 
    <td>H</td> 
    <td> Input</td> 
    <td> Input</td> 
    </tr> 
</tbody> 

と、このCSS：

th, 
td { 
    border: 1px solid black; 
} 

tbody .colored td[rowspan]:not(:first-child) { 
    border-left: 2px solid red; 
    border-top: 2px solid red; 
    border-bottom: 2px solid red; 
} 

tbody .colored td:nth-of-type(n+2) { 
    border-top: 2px solid red; 
} 

tbody tr td:last-child { 
    border-right: 2px solid red; 
} 

tbody tr:last-child td:nth-child(n+1) { 
    border-bottom: 2px solid red; 
} 

https://plnkr.co/edit/VYFXhZf0fnZqmr1BN1z6?p=preview