Gleicher Abstand zwischen 2 Worten in einer Tabellenzeile

Gelöst lob01
(@lob01)

vor 1 Jahr, 3 Monaten

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)

1 2 →

bscu
(@bscu)

vor 1 Jahr, 3 Monaten

Ehrlich gesagt verstehe ich nicht was du meinst.

Thread-Starter lob01
(@lob01)

vor 1 Jahr, 3 Monaten

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

bscu
(@bscu)

vor 1 Jahr, 3 Monaten

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)

vor 1 Jahr, 3 Monaten
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 vor 1 Jahr, 3 Monaten von lob01 geändert.
bscu
(@bscu)

vor 1 Jahr, 3 Monaten

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

Das macht man mit CSS

Thread-Starter lob01
(@lob01)

vor 1 Jahr, 3 Monaten

Ok, kannst du mir sagen wie?

bscu
(@bscu)

vor 1 Jahr, 3 Monaten

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)

vor 1 Jahr, 3 Monaten

Vielen Dank, werde ich mich mit beschäfigen. Immer toll eine Antwort auf ein Problm zu bekommen.
Moderator Hans-Gerd Gerhards
(@hage)

vor 1 Jahr, 3 Monaten
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)

vor 1 Jahr, 3 Monaten

Vielen Dank

bscu
(@bscu)

vor 1 Jahr, 3 Monaten

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.

Moderator Hans-Gerd Gerhards
(@hage)

vor 1 Jahr, 3 Monaten

@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)

vor 1 Jahr, 3 Monaten

Ok, jetzt komme ich leider garnicht mehr mit.

bscu
(@bscu)

vor 1 Jahr, 3 Monaten

Wie schon gesagt, du brauchst eine weitere Tabellenspalte und die Breite kann du per CSS steuern
Moderator Bego Mario Garde
(@pixolin)

Moderator (nicht mehr aktiv)

vor 1 Jahr, 3 Monaten
… aber wie füge ich das [eine zusätzliche Spalte] nachträglich ein …?

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:

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

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.