CSS: Tabelle mit 2 und mehr Kopfzeilen formatieren
bearbeitet von
@@Jan^3
> ~~~html
> <table border="2">
> <tr>
> <td rowspan="2">Schlüssel</td>
> <td rowspan="2">Bezeichnung</td>
> <td colspan="2">Datentyp</td>
> <td rowspan="2">Beschreibung</td>
> <td rowspan="2">Referenzliste Werte</td>
> </tr>
> <tr>
> <td>Typ</td>
> <td>Größe</td>
> </tr>
> <tr>
> <td>Zelle 1.1</td>
> ⋮
> </tr>
> </table>
> ~~~
>
>
> Habt ihr einen Tipp für mich?
Aus Scheiße Gold machen. Das DOM per JavaScript umwandeln zu
~~~html
<table border="2">
<thead>
<tr>
<th rowspan="2">Schlüssel</th>
<th rowspan="2">Bezeichnung</th>
<th colspan="2">Datentyp</th>
<th rowspan="2">Beschreibung</th>
<th rowspan="2">Referenzliste Werte</th>
</tr>
<tr>
<th>Typ</th>
<th>Größe</th>
</tr>
</thead>
<tbody>
<tr>
<td>Zelle 1.1</td>
⋮
</tr>
</tbody>
</table>
~~~
Dann klappt’s auch mit dem ~~Nachbarn~~ Stylen.
LLAP 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)
CSS: Tabelle mit 2 und mehr Kopfzeilen formatieren
bearbeitet von
@@Jan^3
> Moin,
>
> ich darf viele HTML-Seiten, welche von WikidPad erzeugt wurden formatieren.
>
> In den html-Seiten gibt es viele Tabellen. Teilweise haben die Tabellen ein, sehr viele aber auch zwei und drei Kopfzeilen. Das Problem ist, dass das Programm WikidPad keine html konformen Tabellenkopf mit <th> erstellt. Vielmehr besteht die Tabellen nur Datenzellen mit <td>.
>
> Die Formatierung mit einer Kopfzeile habe ich mit der Pseudoklasse :first-child umgesetzt. Das funktioniert auch ganz gut. Bei mehr als einer Kopfzeile scheitere ich. Weist die Tabelle mehr als eine Kopfzeile auf, kommen im Tabellenkopf (bzw. der ersten Zeile der Tabelle) immer mindestens eine zusammengesetzte Zelle vor. Trotz langer suche und vielen Versuchen ist es mir bisher nicht gelungen diese Kopfzeilen zu filtern und mit css anzusprechen.
>
> Hier eine Beispieltabelle. Der Übersichtlichkeit halber habe bei jedem Tag nur das class="wikidpad" gelöscht.
>
> ~~~html
> <table border="2">
> <tr>
> <td rowspan="2">Schlüssel</td>
> <td rowspan="2">Bezeichnung</td>
> <td colspan="2">Datentyp</td>
> <td rowspan="2">Beschreibung</td>
> <td rowspan="2">Referenzliste Werte</td>
> </tr>
> <tr>
> <td>Typ</td>
> <td>Größe</td>
> </tr>
> <tr>
> <td>Zelle 1.1</td>
> <td>Zelle 1.2</td>
> <td>Zelle 1.3</td>
> <td>Zelle 1.4</td>
> <td>Zelle 1.5</td>
> <td>Zelle 1.6</td>
> </tr>
> <tr>
> <td>Zelle 2.1</td>
> <td>Zelle 2.2</td>
> <td>Zelle 2.3</td>
> <td>Zelle 2.4</td>
> <td>Zelle 2.5</td>
> <td>Zelle 2.6</td>
> </tr>
> </table>
> ~~~
>
>
> Habt ihr einen Tipp für mich?
>
> Im Voraus schon einmal vielen Dank für alle sachdienlichen Hinweise
>
> Jan
LLAP 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)