HTML/CSS: Komplette Spalte einer Tabelle rechts oder zentriert ausrichten
Frage von Compi | Letztes Update am 26.07.2021 | Erstellt am 14.10.2016
Ich habe eine relativ große HTML-Tabelle (table), bei der ich gerne den Text einer komplette Spalte entweder rechtsbündig oder zentriert ausrichten möchte.
Bis jetzt kenne ich nur die Möglichkeit, jedes einzelne TD-Element mit einem Inline-CSS zu versehen, also zum Beispiel so:
... <tr> <td>Linksbündiger Inhalt</td> <td style="text-align:center">Zentrierter Inhalt</td> <td style="text-align:right">Rechtsbündiger Inhalt</td> </tr> ...
Das Problem liegt auf der Hand: Für jedes TR muss das text-align wiederholt werden - und das können wie gesagt ziemlich viele Zeilen werden.
Gibt es nicht irgendeine einfache Möglichkeit, per CSS oder HTML nur einmal an zentraler Stelle zu definieren, wie die Ausrichtung der kompletten Spalte sein soll? Oder zumindest eine einfachere Lösung als das hier?
Ähnliche Themen
CSS-Stylesheets in HTML einbinden
Tutorial | 0 Kommentare
MySQL: Neue Spalte zu einer Tabelle hinzufügen
Tutorial | 0 Kommentare
Website Performance: Javascript und CSS komprimiert ausliefern und Ladezeiten verkürzen
Tutorial | 0 Kommentare
MySQL: Zeilenumbrüche in MySQL
Tipp | 0 Kommentare
jQuery: CSS Stylesheet Switcher
Tutorial | 1 Kommentar
RTF: Text ausrichten - Links, Rechts, Zentriert und Blocksatz
Info | 0 Kommentare
Bilder, CSS, JS und Seiten neu laden trotz Browser-Cache
Tipp | 2 Kommentare
Wichtiger Hinweis
Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.
Jetzt mitmachen
Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.
Du könntest mit dem CSS-Pseudo-Selektor nth-child arbeiten.
Eine CSS-Regel könnte dann so aussehen:
Deiner Tabelle müsstest du dann nur noch die Klasse zuordnen:
Mit td:nth-child(2) selektierst du das zweite TD-Element. In jeder mit TR beginnenden Zeile der Tabelle beginnt die Zählung von neuem, so dass es ausreichend ist, der kompletten Tabelle die Klasse zuzuweisen, um immer die zweite Spalte auszurichten.
Letztes Update am 26.07.2021 | Erstellt am 14.10.2016
Um auch ältere Browser zu unterstützen, die mit nth-child noch nicht umgehen können, könntest du auch folgendes verwenden:
Mit diesem CSS-Selektor wählst du jede Spalte beziehungsweise jedes TD-Element aus, vor dem zwei andere TD-Elemente sind.
Du würdest in diesem Fall also die dritte Spalte jeder Tabelle mit der Klasse "colright" rechtsbündig ausrichten.
Letztes Update am 26.07.2021 | Erstellt am 15.10.2016
Wenn es dir nur darauf ankommt, kürzer als <td style="text-align:center"> zu werden, könntest du auch <td class="ralign"> schreiben und deinem CSS die Klasse ralign {text-align:center} hinzufügen.
16.10.2016 um 21:25