Zelleninhalte bei :before ausrichten

[geservt]

Ich habe mich hiermit beschäftigt: https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Tabellen_responsiv_gestalten#Anpassung_f.C3.BCr_schmale_und_sehr_schmale_Viewports

Wie schaffe ich es nun, dass die Zelleninhalte der Tabellenzeilen, die dann untereinander erscheinen, jeweils immer den gleichen Abstand vom linken Rand haben. So wie in dem Beispiel bemisst sich ja die Breite der "before"-Bereiche jeweils an der Länge des Inhalts. Dadurch werden dann die Zelleninhalte nicht bündig untereinander dargestellt - was ich aber gern realisieren würde.

[Gunnar Bittersmann]

@@geservt

Wie schaffe ich es nun, dass die Zelleninhalte der Tabellenzeilen, die dann untereinander erscheinen, jeweils immer den gleichen Abstand vom linken Rand haben.

Indem du das padding für th und td auf denselben Wert setzt?

LLAP 🖖

[geservt]

th ist doch im Fall der schmalen Viewport-Ansicht sowieso ausgeblendet. Wenn ich für td ein padding-left: 150px; setze, dann wandert alles komplett nach rechts. Ich will aber die Zelleninhalte bündig untereinander haben, also die "before-Bereiche" mit fester Breite haben, damit dann das was in der td-Zelle steht bündig untereinander dargestellt wird.

[Gunnar Bittersmann]

@@geservt

th ist doch im Fall der schmalen Viewport-Ansicht sowieso ausgeblendet.

Nein. thead ist ausgeblendet. Die Zeilenköpfe th im tbody sind natürlich nicht ausgeblendet.

Ich will aber die Zelleninhalte bündig untereinander haben, also die "before-Bereiche" mit fester Breite haben, damit dann das was in der td-Zelle steht bündig untereinander dargestellt wird.

Was zu tun ist, sagte ich bereits.

LLAP 🖖

[Matthias Apsel]

Hallo geservt,

Ich will aber die Zelleninhalte bündig untereinander haben,

Das erreiche ich mit td { padding: .2em .5em; }

also die "before-Bereiche" mit fester Breite haben, damit dann das was in der td-Zelle steht bündig untereinander dargestellt wird.

Das erreiche ich mit

td::before {
  display: inline-block;
  min-width: 10em;
}

Bis demnächst
Matthias

[geservt]

Das erreiche ich mit td::before { display: inline-block; min-width: 10em; }

Vielen Dank, das wars!!!

[Henry]

Hallo,

*zur Info für OP

Vielen Dank, das wars!!!

wäre schön das dann als "gelöst" zu markieren.

*Zur Info für Admin Lange Links brechen aus. (IE11 und Handy):

Gruss
Henry

[Matthias Apsel]

Hallo Henry,

*Zur Info für Admin

Wenn du ein Leerzeichen nach dem Aufzählungszeichen lässt, bekommst du sogar eine echte Liste.

Lange Links brechen aus. (IE11 und Handy):

Tja, da kann man nicht viel machen. Automatische Silbentrennung hilft. Aber das hat natürlich auch Nachteile. Vielleicht kann man die auch auf .posting-content a beschränken.

Bis demnächst
Matthias