0 0 Stimmen

HTML/CSS: Komplette Spalte einer Tabelle rechts oder zentriert ausrichten

Frage von Compi | 14.10.2016 um 12:03 Uhr

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?

AntwortenPositivNegativDatumStimmen

Anja Proggy

Profil anzeigen | Nachricht
Avatar
2Beste Antwort
2 Stimmen

Du könntest mit dem CSS-Pseudo-Selektor nth-child arbeiten.

Eine CSS-Regel könnte dann so aussehen:

table.colright td:nth-child(2) {
  text-align: right;
}

Deiner Tabelle müsstest du dann nur noch die Klasse zuordnen:

<table class="colright">
  <tr><td>A</td><td>B</td><td>C</td></tr>
  <tr><td>A</td><td>B</td><td>C</td></tr>
  <tr><td>A</td><td>B</td><td>C</td></tr>
</table>

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.
14.10.2016 um 16:31 Uhr

AntwortenPositiv Negativ

Progger99

Profil anzeigen | Nachricht
Avatar
02 Stimmen

Um auch ältere Browser zu unterstützen, die mit nth-child noch nicht umgehen können, könntest du auch folgendes verwenden:

table.colright td + td + td {
  text-align: right;
}

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.
15.10.2016 um 22:55 Uhr

AntwortenPositiv Negativ

Compi

Profil anzeigen | Nachricht
Avatar
00 Stimmen

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 Uhr

AntwortenPositiv Negativ
Antworten

Ähnliche Themen

Wichtiger Hinweis

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.