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:
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
Ü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"] {width: 60px;}
.t1 th[class="col2"] {width: 120px;}
.t2 th[class="col1"], .t2 td[class="col1"] {width: 100px;background:yellow;}
.t2 th[class="col2"] {width: 100px;}
</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>
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
Kommentar