Support » Allgemeine Fragen » Gleicher Abstand zwischen 2 Worten in einer Tabellenzeile

  • Gelöst lob01

    (@lob01)


    Hallo zusammen, auf der Seite seht ihr, wenn ihr runterscollt eine Artikelübersicht. Diese habe ich mit einer Tabelle erstellt. In der ersten Spalte ist es kaum möglich die Abstände zwischen den 2 Worten so zu setzen, das der 2. Text in einer Linie nach unten beginnt. Ich habe da stundenlang rumgetrixt um es so hinzubekommen aber perfekt ist anders. Gibt es da einen Trick oder könnte ich die Zeile nachträglich noch einmal unterteilen? Bin für jeden Tipp dankbar. Ich mache alles mit dem Blockeditor.

    Danke und Grüße,

    Stefan

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 19)
  • Ehrlich gesagt verstehe ich nicht was du meinst.

    Thread-Starter lob01

    (@lob01)

    https://artur-lang.schlaggitarren.de/wp-content/uploads/2024/01/Screenshot-2024-01-21-195047.png

    Schau die Abstände an, die bekmme ich nicht sauber, bündig in ein Reihe.

    Du versuchst die Abstände mit Leerzeichen hinzubekommen, das geht nicht und ist immer unsauber, weil Buchstaben nicht alle die gleiche Breite haben. Du musst also eine weitere Tabellenspalte einfügen, so dass du z.B. TP und Prämus nicht in einer Tabellenspalte steht.

    PS: Das ist aber kein WordPress-Problem, sondern ein HTML-Problem.

    Thread-Starter lob01

    (@lob01)

    Danke, daran habe ich auch gedacht aber wie füge ich das nachträglich ein und wie bekomme ich es hin das der 1, Spalt kleiner ist als der 2. ? Vielen Dank. Also im Block Modu.

    • Diese Antwort wurde geändert vor 3 Monaten von lob01.

    wie bekomme ich es hin das der 1, Spalt kleiner ist las der 2. ?

    Das macht man mit CSS

    Thread-Starter lob01

    (@lob01)

    Ok, kannst du mir sagen wie?

    Vielleicht geht das auch mit Elementor Pro, aber das kann ich dir nicht sagen. Wenn man das nur per CSS regeln kann, dann hilft: https://www.w3schools.com/cssref/pr_dim_width.php

    Thread-Starter lob01

    (@lob01)

    Vielen Dank, werde ich mich mit beschäfigen. Immer toll eine Antwort auf ein Problm zu bekommen.

    Hallo,
    Teste mal bitte die folgenden CSS-Regeln unter Design > Customizer > Individuelles CSS (möglichst am Ende einfügen). Vorher bitte sichern.

    td.has-text-align-left {
        letter-spacing: 0.1em;
    }

    Den Wert (0.1em) kannst du natürlich beliebig ändern.

    Viele Grüße
    Hans-Gerd

    Thread-Starter lob01

    (@lob01)

    Vielen Dank

    Wie komme ich auf Elementor Pro? Das war wohl in einem anderen Thread 🙁 😀

    @hage
    ich bin mir nicht sicher, aber ich glaube nicht, dass man mit letter-spacing weiter kommt.

    @bscu
    da hast du vollkommen recht. Ich wollte das gerade hier schreiben, aber da warst du schneller. Danke für den Hinweis. Letterspacing betrifft den Abstand zwischen den Buchstaben, aber nicht die Breite der Buchstaben.

    Thread-Starter lob01

    (@lob01)

    Ok, jetzt komme ich leider garnicht mehr mit.

    Wie schon gesagt, du brauchst eine weitere Tabellenspalte und die Breite kann du per CSS steuern

    Moderator Bego Mario Garde

    (@pixolin)

    … aber wie füge ich das [eine zusätzliche Spalte] nachträglich ein …?

    Screenshot

    Spalte anklicken (1), auf Icon „Tabellenzellen“ klicken (2), auf Spalte danach einfügen (3).

    und wie bekomme ich es hin das der 1, Spalt kleiner ist als der 2.

    Die Spaltenbreite richtet sich nach dem Inhalt. Enthält die erste Spalte nur drei Buchstaben, wird sie automatisch schmaler dargestellt als die folgenden Spalten mit mehr Buchstaben.

    Wenn du ür die Breite einer Tabellenspalte einen festen Wert festlegen möchtest, kannst du der Tabelle in der rechten Spalte unter „Erweitert“ einen CSS-Klassennamen zuweisen. Hier habe ich tabelle-namen verwendet:

    Screenshot

    In Design > Website-Editor kannst du unter Stile (4) > Layout > Kebab-Menü (5) > Zusätzliches CSS (6) dazu eine eigene CSS-Regel eintragen.

    Screenshot

    CSS-Regel:

    .tabelle-namen td.nth-child(2) { width: 100px; }

    Mit dieser Regel wird der zweiten Spalte (nth-child(2)) der Tabelle mit der CSS-Klasse tabelle-namen eine Breite von 100 Pixeln zugewiesen (width: 100px). Achte darauf, dass der Klassen-Name in der rechten Spalte ohne Punkt (tabelle-namen) eingetragen werden muss, in der CSS-Regel aber mit Punkt (.tabelle-namen) erscheint.

    Solltest du dich fragen, wieso das in WordPress etwas kompliziert ist: Mit festen Spaltenbreiten lässt sich die Tabelle nicht mehr flexibel auf allen Endgeräten ausgeben, da die Breite fest vorgegeben ist. Das entspricht nicht dem üblicherweise verwendeten „responsive Webdesign“ und sollte deshalb vermieden werden. Wieso also etwas einfach machen, was gar nicht verwendet werden soll. 😉

    Viel Erfolg mit deiner Website.

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 19)