Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 20.10.2013, 16:59
FlavorFlav FlavorFlav ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2007
Beiträge: 12
FlavorFlav befindet sich auf einem aufstrebenden Ast
Standard Tabellenspalten stylen

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>
Mit Zitat antworten
Sponsored Links