Ausrichtung in einer Tabellenzelle

[Friedel]

Hallo

Ich verzweifle gerade an einer Tabelle, in der das Kassenbuch eines Gemeinnützigen Vereins dargestellt werden soll. Ich habe im CSS mit

.datum {width: 10ch;}
.betrag {min-width: 10ch; }

die Breite einiger Spalten festgelegt. Jetzt versuche ich seit Stunden auch die Textausrichtung zu ändern. Alles in td's in .betrag soll rechtsbündig sein. Ich dachte eigentlich, dass sollte mit

.betrag td {text-align: right;}

gehen. Tut es aber nicht. Auch

.datum {width: 10ch;}
.betrag {min-width: 10ch; text-align: right;}

verändert nichts. Erstaunlicherweise wird die Breite der Spalten richtig dargestellt, der Inspektor verrät aber nicht warum. Er zeigt keine Breitenabgabe an. Wenn ich sie aus dem CSS lösche, passen die Breiten auch nicht mehr. Der Inspektor zeigt auch keine Angabe für die Textausrichtung an. Nur die wird auch nicht dargestellt.

Wo ist der Fehler?

[Gunnar Bittersmann]

@@Friedel

Ich dachte eigentlich, dass sollte mit

.betrag td {text-align: right;}

gehen. Tut es aber nicht. Auch

.datum {width: 10ch;}
.betrag {min-width: 10ch; text-align: right;}

verändert nichts. […]

Wo ist der Fehler?

Vor deinem Bildschirm. 😜

Breitenangaben von col-Elementen werden beim Rendern einer Tabelle berücksichtigt, ja. Der Text aber (und damit auch dessen Ausrichtung) steht nicht in den Spalten, sondern in den Zellen (th/td), weshalb .betrag { text-align: right } nicht wirkt.

Die Zellen sind nun aber Kindelemente der Zeilen (tr), nicht Nachfahren der Spalten (col), weshalb auch .betrag td { text-align: right } nicht wirkt.

Was du tun müsstest: die betreffenden Zellen klassifizieren: <td class="betrag">, dann wirkt .betrag { text-align: right }.

Eine andere Möglichkeit wäre das Abzählen der Zellen innerhalb der Zeilen; bspw. td:nth-of-type(4) { text-align: right }. Das fällt aber in sich zusammen, wenn eine Tabellenspalte hinzukommt oder wegfällt. Ich würde das eher nicht machen.

🖖 Live long and prosper

[MudGuard]

Hi,

Breitenangaben von col-Elementen werden beim Rendern einer Tabelle berücksichtigt, ja. Der Text aber (und damit auch dessen Ausrichtung) steht nicht in den Spalten, sondern in den Zellen

ja, schade, daß es nicht sowas gibt wie

td:in-column(someSelectorSelectingAColElement)

Was du tun müsstest: die betreffenden Zellen klassifizieren: <td class="betrag">

was dann das HTML unnötig aufbläht, wenn dasselbe class="bla" zig mal hingeschrieben werden muß.

Eine andere Möglichkeit wäre das Abzählen der Zellen … Das fällt aber in sich zusammen, wenn eine Tabellenspalte hinzukommt oder wegfällt.

Eben, das ist auch nur ne Notlösung

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

ja, schade, daß es nicht sowas gibt wie

td:in-column(someSelectorSelectingAColElement)

Nichts dergleichen in CSS Table Module Level 3 gefunden.

Was du tun müsstest: die betreffenden Zellen klassifizieren: <td class="betrag">

was dann das HTML unnötig aufbläht,

Ob nötig oder unnötig, liegt im Auge des Betrachters.

wenn dasselbe class="bla" zig mal hingeschrieben werden muß.

Ja, aber: Wenn das HTML durch ein Script generiert wird, muss man das nicht zigmal tun, sondern (für jede betreffende Spalte) nur einmal.

Und bei der Übertragung fällt das nicht ins Gewicht, weil zigmal dasselbe wegkomprimiert wird.

🖖 Live long and prosper

[Friedel]

Danke. Ich habe die Lösung mit dem Abzählen der Zellen gewählt. Bei dieser Tabelle wird sich zwar die Zahl der Zeilen ändern, aber nie die Zahl der Spalten.

[Timo]

Hallo Friedel,

noch eine Ergänzung, weil es um Beträge in einem Kassenbuch geht: Rechtsbündig allein reicht oft nicht, damit die Kommas sauber untereinander stehen. Viele Schriften haben proportionale Ziffern, eine 1 ist dann schmaler als eine 8, und die Spalte wirkt unruhig. Abhilfe:

td:nth-of-type(4) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

tabular-nums gibt allen Ziffern dieselbe Breite, nowrap verhindert, dass ein Betrag wie „1.234,56 €“ zwischen Zahl und Eurozeichen umbricht. Damit die Kommas wirklich fluchten, sollten außerdem alle Beträge gleich viele Nachkommastellen haben. Das stellst du am einfachsten schon in Calc über das Zahlenformat ein, bevor du exportierst.

Gruß Timo

[Gunnar Bittersmann]

@@Timo

td:nth-of-type(4) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

Bitte Code-Blöcke als solche markieren. Ich hab das mal für dich gemacht.

Viele Schriften haben proportionale Ziffern, eine 1 ist dann schmaler als eine 8, und die Spalte wirkt unruhig. Abhilfe:

td:nth-of-type(4) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

Ja. Das geht aber nur bei OpenType-Fonts, die auch Tabellenziffern bereitstellen.

Und wenn man schon eine solche Angabe wie
body { font-variant-numeric: lining-nums } gemacht hat, weil man Mediävalziffern nicht mag, dann wird diese überschrieben und es gilt für Mediäval- vs. Versalziffern wieder der Default des jeweiligen Fonts, bei etlichen Fonts hat man dann wieder ungewünscht Mediävalziffern.

Man muss beides setzen:
font-variant-numeric: lining-nums tabular-nums

Und das würde ich dann gleich für alle Tabellen setzen (wird an alle Tabellenzellen vererbt):

table {
  font-variant-numeric: lining-nums tabular-nums;
}

🤣

Ich setze zwischen Zahl und Einheit (und bei „29. September“ und „A.A. Milne“) immer ein nicht-umbrechendes Leerzeichen ([⌥ option][space] bei macOS).

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar Bittersmann,

([⌥ option][space] bei macOS)

Mag der Geier wissen, warum Windows einem kein AltGr+Space oder ähnliches dafür anbietet. Brauchen täte man es…

So bleibt nur Alt+0160 (mit 0 nimmt er die ISO 8859-Codepage, wo NBSP auf der Unicode-Position steht) oder Alt+255 (ohne 0 vorweg geht er in die Einbyte-Codepage der Befehlszeile, und dort ist NBSP auf 255).

Meh meh meh

Rolf