Frage zum Wiki-Artikel „Zellen_verbinden“ / col-Element

[Robert B.]

Moin,

ich habe eine Frage zu dem Beispiel mit col im verlinkten Wiki-Artikel: Da haben zwei col eine class – lässt sich damit etwas Sinnvolles mit CSS anfangen? Ich hatte Folgendes versucht:

<style>
.zahl {
    text-align: right;
}
</style>
<table>
<colgroup>
    <col>
    <col class="zahl">
    <col class="zahl">
</colgroup>

Meine Erwartung wäre jetzt, dass die CSS-Klasse auf die beiden Spalten angewendet wird, d.h.

| Schlüssel | Wert | Wert |
| anderer   |   23 |   42 |

Das ist allerdings nicht der Fall. Funktioniert das überhaupt, was ich mir vorstelle? Habe ich einen (Denk-) Fehler?

Vielen Dank und viele Grüße
Robert

[Rolf B]

Hallo Robert,

nein, funktioniert nicht.

Spec: https://www.w3.org/TR/CSS22/tables.html#columns

Es gibt nur ganz wenige CSS Eigenschaften, die über Columns auf Zellen übertragen werden können.

Und die wenigen Attribute, die HTML 4 noch spezifiziert hatte, wurden mit HTML 5 auf span reduziert. Kein Align, kein Width. Das macht man nun durch Anwendung von CSS Eigenschaften auf die td Elemente.

Sobald colspan ins Spiel kommt, wird die Sache unangenehm…

Rolf

[Gunnar Bittersmann]

@@Rolf B

Spec: https://www.w3.org/TR/CSS22/tables.html#columns

Es gibt nur ganz wenige CSS Eigenschaften, die über Columns auf Zellen übertragen werden können.

Sehr ganz wenige – nämlich gar keine. Weil wie dort steht: „in the source document cells are descendants of rows, never of columns.“

(Die dortige Formulierung „The background properties set the background for cells in the column“ halte ich für ungenau. Es wird eben nicht der Hintergrund für die Tabellenzellen gesetzt, sondern für die Tabellenspalte. Die Zellen liegen (in z-Richtung) darüber, deshalb „…but only if both the cell and row have transparent backgrounds.“)

Die text-align-Eigenschaft wird zwar vererbt, col-Elemente haben aber keine Kinder, also keine Erben. (Kein Testament gemacht.) Da td nicht Kinderelemente von col sind, können sie nicht von diesen erben.

Da bleibt der Weg, die Klasse zahl den entsprechenden td-Elementen zu verpassen.^[1]

Und bei der Gelegenheit nicht nur die Ausrichtung angeben, sondern auch die Verwendung von gleichbreiten Ziffern: font-variant-numeric: tabular-nums.

😷 LLAP

---

1. Man sollte hier nicht auf die Idee kommen, die Zellen per td:nth-child() oder td:nth-of-type() selektieren zu wollen. Wenn später eine Spalte hinzukommt oder wegfällt, haut’s die Zählung durcheinander. Dann auch das Stylesheet anpassen zu müssen sollte man vermeiden. ↩︎

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Da bleibt der Weg, die Klasse zahl den entsprechenden td-Elementen zu verpassen.[^1]

Wobei man das in @Robert B. s Fall gar nicht braucht – es enthalten ja alle Datenzellen Zahlen:

| Schlüssel | Wert | Wert |
| anderer   |   23 |   42 |

„anderer“ ist hier wohl keine Datenzelle td, sondern eine Kopfzelle th! Das Markup sollte dann so aussehen:

<table>
  <thead>
    <tr>
      <th>Schlüssel</th>
      <th>Wert</th>
      <th>Wert</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>anderer</th>
      <td>23</td>
      <td>42</td>
    </tr>
  </tbody>
</table>

Im Stylesheet dann

th {
  text-align: left;
}

td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

Wobei man letzteres evtl. auch gleich für die gesamte Tabelle angeben könnte.

😷 LLAP