Grenze um Zeile übergreifende Tabelle

Question

Hallo Ich habe Tabelle mit td und row span erstellt. Jetzt will ich die Struktur klarer durch bolding als die Hauptkategorie machen solche

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

Wie kann ich das erreichen? Ich fürchte, dass ich jeden Zellenschrank manuell einzeln färben muss? Es scheint, dass das Boarder- und Coloring-Attribut entweder das td- oder das tr-Element betrifft. Ist es also möglich, einen solchen Effekt über die Spalte zu verteilen?

Answer 1

versuchen Sie dies:

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

und diese 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