geservt: Zelleninhalte bei :before ausrichten

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.

  1. @@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 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. 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.

      1. @@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 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      2. 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

        --
        Rosen sind rot.
        1. Das erreiche ich mit td::before { display: inline-block; min-width: 10em; }

          Vielen Dank, das wars!!!

          1. 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): lange links

            Gruss
            Henry

            1. 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): lange links

              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

              --
              Rosen sind rot.