Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] CSS: Tabellen-Spalten mit einer table-class stylen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] CSS: Tabellen-Spalten mit einer table-class stylen

    Problem:
    Über einen einzigen Klassennamen für eine Tabelle soll auch ein CSS-Styling einzelner Tabellenspalten ermöglicht werden.

    Hintergrund:
    Bei der Generierung von Tabellen per PHP soll für das gesamte Styling einer Tabelle inclusive einzelner Tabellenspalten nur ein Klassenname benötigt werden,
    der bei der Erstellung geliefert wird. Das gesamte Styling der Tabelle soll per CSS erfolgen.
    Damit sollen im PHP-Code außer den Klassennamen für die Tabelle keine weiteren Angaben für Styles und auch keine speziellen Referenzen (Id's) für die Tabellenelemente benötigt werden.

    Lösung:
    Die einzelnen Tabellenspalten werden jeweils mit einer speziellen class versehen.
    Diese wird selbst jedoch nicht benutzt, sondern dient primär zur Selektion über Attributselektoren in Abhängigkeit von der Elternklasse.

    Beispiel:
    PHP-Code:
    <!DOCTYPE html>
    <
    html>
    <
    head>
    <
    title>Table Col Style</title>
    <
    style type="text/css">
    .
    t1,.t2 border#5F5F5F 2px solid; border-collapse:collapse; margin:2px auto;}
    .t1 th,.t2 th {border#7F7F7F 1px solid; background:#ddd; font:bold 12px Arial; padding: 2px 6px;}  
    .t1 td, .t2 td {border#7F7F7F 1px solid; font:normal 12px Arial; padding: 2px 6px;}

    .t1 th[class="col1"] {width60px;}
    .
    t1 th[class="col2"] {width120px;}

    .
    t2 th[class="col1"], .t2 td[class="col1"] {width100px;background:yellow;}
    .
    t2 th[class="col2"] {width100px;}

    </
    style>
    </
    head>
    <
    body>
    <
    table class="t1">
      <
    tr><th class="col1">Col1</th><th class="col2">Col2</th></tr>
      <
    tr><td class="col1">Wert 11</td><td class="col2">Wert 12</td></tr>
      <
    tr><td class="col1">Wert 21</td><td class="col2">Wert 22</td></tr>
    </
    table>

    <
    table class="t2">
      <
    tr><th class="col1">Col1</th><th class="col2">Col2</th></tr>
      <
    tr><td class="col1">Wert 11</td><td class="col2">Wert 12</td></tr>
      <
    tr><td class="col1">Wert 21</td><td class="col2">Wert 22</td></tr>
    </
    table>
    </
    body>
    </
    html
    Die th,td-Elemente in den Spalten haben in beiden Tabellen gleiche Klassennamen,
    sind aber allein durch die CSS-Definitionen unterschiedlich gestaltet.
    Die Spalten der ersten Tabelle sind 60px und 120px breit, in der zweiten Tabelle 100px
    und nur dort hat die erste Spalte einen gelben Hintergrund.

    Bin für Hinweise zu Alternativen dankbar, wenn es einfacher geht, da ich mich nicht zu den CSS-Experten zähle.

    LG jspit

  • #2
    Also um das ganze auch im IE8 nutzen zu können, brauchst du die nummerierten Klassen. Für IE9+ und andere neue Browser könnte man über nth-child stylen und könnte sich so Nummerierungen sparen. IE8 wird aber ja leider noch von über 20% genutzt.
    Wenn ich dich richtig verstehe, soll die Tabelle dann alle Grundlagen bieten, um alles wie gewünscht stylen zu können. Da würden dann noch durchnummerierten Klassen für die tr-Tags fehlen.

    Klassenangaben im CSS macht man übrigens besser so:
    Code:
    .t1 th.col1 {width: 60px;}
    Nur mal noch als Info: Ein detaillierterer Tabellenaufbau (HTML5) mit allen Tags wäre z.B. so:
    Code:
    <table>
    	<colgroup>
    		<col>
    		<col>
    	</colgroup>
    	<caption></caption>
    	<thead>
    		<tr>
    			<th></th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td></td>
    		</tr>
    	</tbody>
    	<tfoot>
    		<tr>
    			<td></td>
    		</tr>
    	</tfoot>
    </table>

    Kommentar


    • #3
      Vielen Dank fürs Feedback.
      Zitat von sk84 Beitrag anzeigen
      Da würden dann noch durchnummerierten Klassen für die tr-Tags fehlen.
      Ja, wenn ich einzelne Zeilen herausheben möchte oder so. Brauch ich z.Zt. noch nicht.
      Zitat von sk84 Beitrag anzeigen
      Klassenangaben im CSS macht man übrigens besser so:
      Code:
      .t1 th.col1 {width: 60px;}
      Ja, so geht es auch, und ich spar noch etwas Schreibarbeit.

      LG jspit

      Kommentar

      Lädt...
      X