Breite von Tabellenspalten im Seitenheader definieren

[Guenther43]

Ich habe mehrere Tabellen mit 4 Spalten auf einer Seite (HTML 4.01). Die Tabellen haben eine Breite von 100%. Wenn ich im Tabellenheader folgende Angaben mache, dann werden die Spalten so breit wie angegeben gemacht

<table class="med4">
<colgroup>   
     <col width="17%">
     <col width="14%">
     <col width="29%">
</colgroup>   
<thead>
    <tr>
        <th>Wirkstoffgruppe</th>
        <th>Wirkstoff</th>
        <th>Handelsnamen (Beispiele)</th>
        <th>Auswirkungen</th>
    </tr>
</thead>

Nun möchte ich aber die Spaltenbreiten nicht in jeder Tabelle wieder angeben, sondern nur einmal im Seitenkopf, also mit <style type="text/css"> ... ... </style>

Wie geht das?

Danke im Voraus für Tipps!

[Matthias Apsel]

Hallo Guenther43,

Nun möchte ich aber die Spaltenbreiten nicht in jeder Tabelle wieder angeben, sondern nur einmal im Seitenkopf, also mit <style type="text/css"> ... ... </style>

Besser in einer ausgelagerten CSS-Ressource.

Wie geht das?

Mithilfe der Pseudoklassen nth-child(). Wiki

th:first-child, td:first-child {
  width: 17%;
}
th:nth-child(2), td:nth-child(2) {
  width: 17%;
}

kürzer (nur, wenn es kein script oder template als Kind der tr gibt)

tr > :first-child {
  width: 17%;
}
tr > :nth-child(2) {
  width: 14%
}

Ggf. brauchst du noch ein table-layout: fixed; für die Tabelle.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Mithilfe der Pseudoklassen nth-child().

Nicht die beste Idee. Wenn man die Tabelle ändert (Spalten vertauscht, hinzufügt, entfernt), muss man das Stylesheet anpassen.

„Ich habe mehrere Tabellen mit 4 Spalten auf einer Seite“, die alle dieselben Spaltenbreiten(verhältnisse) haben sollen, liest sich so, als seien es immer wieder gleichartige Daten, also dieselben Tabellenköpfe.

Besser: Den col-Elementen eine Klasse verpassen und die jeweiligen Breiten dafür angeben:

<colgroup>
	<col class="Wirkstoffgruppe"/>
	<col class="Wirkstoff"/>
	<col class="Handelsnamen"/>
	<col class="Auswirkungen"/>
</colgroup>

.Wirkstoffgruppe { width: 17% }
.Wirkstoff       { width: 14% }
.Handelsnamen    { width: 29% }

---

kürzer (nur, wenn es kein script oder template als Kind der tr gibt)

Dann greifen deine Selektoren aber auch falsch. :nth-of-type() statt :nth-child() wäre angebracht gewesen.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Dann greifen deine Selektoren aber auch falsch. :nth-of-type() statt :nth-child() wäre angebracht gewesen.

Nur, wenn es keine Zeilenüberschriften gibt.

Bis demnächst
Matthias