Hallo,
ich möchte gern in einer Tabelle einzelne Spalten formatieren. Zum Beispiel font-width und background. Ich habe folgende 3 Möglichkeiten bisher gefunden. Leider gefällt mir keine bisher:
1.
an jede Zelle der Spalte ein class-Element kleben.
html:
HTML-Code:
<td class="spalte_XY">
css:
Code:
.spalte_xy {background: #00FF00; font-weight: bold;}
Problem: viel redundanter code (tabellen können mehr als 1000 zeilen haben)
2.
col/colgroup:
HTML-Code:
<col class="spalte_XY"/>
Problem: font-width wird nicht unterstützt
3.
Nutzung der css Pseudoklasse nth-of-type:
Code:
tbody td:nth-of-type(3){ackground: #00FF00; font-weight: bold;}
Problem: blöderweise können die Spalten nicht durchgezählt werden, da nicht bekannt ist in welcher Reihenfolge welche Spalte erscheint.
Mein Problem ist also:
- ich möchte ungern jede <td>-Zelle mit einem class-attribut versehen, da ich dann so viel redundaten Mark-Up Code bekomme
- die Tabelle wird dynamisch erzeugt. Es können Spalten fehlen oder zusätzliche erscheinen. Eine addressierung per Name/Id wäre gut.
Fällt jemanden noch etwas besseres ein?
Hier nochmal meine Lösungen als komplette Beispiele:
HTML-Code:
<style type="text/css">
#nthoftype tbody td:nth-of-type(3){ background: #00FF00; font-weight: bold; }
.spalte_xy {background: #00FF00; font-weight: bold;}
</style>
<h1>1</h1>
<table id="td">
<tr>
<td>11</td>
<td>21</td>
<td class="spalte_XY">31</td>
</tr>
<tr>
<td>12</td>
<td>22</td>
<td class="spalte_XY">32</td>
</tr>
<tr>
<td>13</td>
<td>23</td>
<td class="spalte_XY">33</td>
</tr>
</table>
<h1>2</h1>
<table id="col">
<col />
<col />
<col class="spalte_XY"/>
<tr>
<td>11</td>
<td>21</td>
<td>31</td>
</tr>
<tr>
<td>12</td>
<td>22</td>
<td>32</td>
</tr>
<tr>
<td>13</td>
<td>23</td>
<td>33</td>
</tr>
</table>
<h1>3</h1>
<table id="nthoftype">
<tr>
<td>11</td>
<td>21</td>
<td>31</td>
</tr>
<tr>
<td>12</td>
<td>22</td>
<td>32</td>
</tr>
<tr>
<td>13</td>
<td>23</td>
<td>33</td>
</tr>
</table>