Bessere Möglichkeit, Text in einer HTML-Tabelle rechtsbündig auszurichten

Question 1

Ich habe eine HTML-Tabelle mit einer großen Anzahl von Zeilen und muss eine Spalte rechtsbündig ausrichten.

Ich kenne folgende Wege,

<tr><td>..</td><td>..</td><td align='right'>10.00</td><tr>

Und

<tr><td>..</td><td>..</td><td class="right-align-class">10.00</td><tr>

Bei beiden Methoden muss ich den Parameter align oder class bei jedem wiederholen <tr> Schild. (Wenn es 1000 Zeilen gibt, muss ich setzen ausrichten=’richtig’ oder class=”right-align-class” 1000 mal.)

Gibt es eine effiziente Möglichkeit, dies zu tun? *Gibt es eine direkte Möglichkeit zu sagen, die dritte Spalte in allen Zeilen rechts ausrichten?

Question 2

Aktualisiert (nach über 10 Jahren!): Ja! Mit der weit verbreiteten praktischen Browserunterstützung ist dies jetzt effizienter möglich, wenn Sie die verwenden nth-child Wähler.

HTML:

<table>
<tr>
<td>foo 1</td>
<td>bar 1</td>
<td>baz 1</td>
<td>bap 1</td>
</tr>
<tr>
<td>foo 2</td>
<td>bar 2</td>
<td>baz 2</td>
<td>bap 2</td>
</tr>
</table>

CSS:

table td { width: 20em; border: 1px solid black; }
table td:nth-child(3) { text-align: end; }

https://jsfiddle.net/mv83qszL/

Bisher war dies nicht möglich, da die Browserunterstützung insbesondere im Hinblick auf neuere CSS-Features inkonsistent und hit-or-miss war. Dies machte es unmöglich, elegantere, effizientere Lösungen zu verwenden – und erforderte viele sich wiederholende Markup- und Klassendefinitionen, um im gesamten Browserbereich der Zielgruppe konsistente Ergebnisse zu erzielen.

Sehen Sie sich den Bearbeitungsverlauf für die vorherige Version dieser Antwort an.

Question 3

Du könntest die verwenden nth-child Pseudoselektor. Zum Beispiel:

table.align-right-3rd-column td:nth-child(3)
{
  text-align: right;
}

Dann tun Sie in Ihrer Tabelle:

<table class="align-right-3rd-column">
  <tr>
    <td></td><td></td><td></td>
    ...
  </tr>
</table>

Leider funktioniert dies nur in Firefox 3.5. Wenn Ihre Tabelle jedoch nur drei Spalten hat, können Sie den Sibling-Selektor verwenden, der eine viel bessere Browserunterstützung bietet. So würde das Stylesheet aussehen:

table.align-right-3rd-column td + td + td
{
  text-align: right;
}

Dies stimmt mit jeder Spalte überein, der zwei andere Spalten vorangehen.

Question 4

Wenn es immer die dritte Spalte ist, können Sie diese verwenden (vorausgesetzt, die Tabellenklasse “Produkte”). Es ist jedoch etwas hacky und nicht robust, wenn Sie eine neue Spalte hinzufügen.

table.products td+td+td {
  text-align: right;
}
table.products td,
table.products td+td+td+td {
  text-align: left;
}

Aber ehrlich gesagt ist die beste Idee, eine Klasse für jede Zelle zu verwenden. Du kannst den … benutzen col -Element, um die Breite, den Rand, den Hintergrund oder die Sichtbarkeit einer Spalte festzulegen, aber keine anderen Eigenschaften. Gründe werden hier diskutiert.

Question 5

Blick durch Ihre genau Frage an Ihre impliziert Problem:

Schritt 1: Verwenden Sie die Klasse wie beschrieben (oder verwenden Sie ggf. Inline-Stile).

Schritt 2: Aktivieren Sie die GZIP-Komprimierung.

Das wirkt Wunder 😉

Auf diese Weise entfernt GZIP die Redundanz für Sie (jedenfalls über das Kabel) und Ihre Quelle bleibt standardkonform.

Question 6

Vor einigen Jahren (im IE nur wenige Tage) benutzte ich die <col align="right"> Tag, aber ich habe es gerade getestet und es scheint eine reine IE-Funktion zu sein:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Test</title>
</head>
<body>
    <table width="100%" border="1">
        <col align="left" />
        <col align="left" />
        <col align="right" />
        <tr>
            <th>ISBN</th>
            <th>Title</th>
            <th>Price</th>
        </tr>
        <tr>
            <td>3476896</td>
            <td>My first HTML</td>
            <td>$53</td>
        </tr>
    </table>
</body>
</html>

Der Ausschnitt ist entnommen www.w3schools.com. Natürlich sollte es nicht verwendet werden (es sei denn, Sie zielen aus irgendeinem Grund wirklich nur auf die IE-Rendering-Engine ab), aber ich dachte, es wäre interessant, es zu erwähnen.

Bearbeiten:

Dh immer noch unterstützt es.
Feuerfuchs hat die Unterstützung in 3.5 eingestellt.
Safari scheint es nicht zu unterstützen, aber das Dokumentation weist auf etwas anderes hin.

Insgesamt verstehe ich die Gründe für die Aufgabe dieses Tags nicht. Es scheint sehr nützlich zu sein (zumindest für manuelles HTML-Publishing).

Question 7

HTML5 hat die Col-Attribut-Funktionalität durcheinander gebracht …

Es ist wirklich uncool, dass HTML5 größtenteils veraltet ist col Attribute und fügte die Unterstützung für die nicht hinzu style Und class Attribute. Moderne Browser noch hält Unterstützung für seine width Attribut, aber nicht für andere. Die Breitenstütze wird wahrscheinlich so halten, wie sie verwendet wird Tabellenlayout Renderalgorithmus.

… was durch die Definition von CSS-Klassenreihen behoben werden kann …

Um eine ähnliche Funktionalität zu erreichen, ohne jede Zeile bearbeiten zu müssen, kann dies durch Definieren erreicht werden

.right-1 td:nth-child(1),
.right-2 td:nth-child(2),
.right-3 td:nth-child(3),
.right-4 td:nth-child(4),
.right-5 td:nth-child(5), ...
  { text-align: right; }

Dies kann mit Hilfe eines CSS-Präprozessors / -Generators eine einzelne Zeile sein, ist aber auch ohne CSS akzeptabel, da die meisten Webtabellen eine angemessene Anzahl von Spalten haben. Dann können Sie die dritte Spalte rechtsbündig ausrichten

<table class="right-3">
...
</table>

…aber es ist nur ein schlechter Hack 🙁

CSS-Klassen sollten die Semantik enthalten. Wenn sie bestimmte Stile implizieren (wie im obigen Beispiel), wird dies semantisch nur inline legalisiert style -Attribut, das HTML mit dem Design zusammenführt (CSS sollte es trennen). Das ist es, was Bootstrap-Stile tun, und das sollten Sie nach Möglichkeit vermeiden.

Question 8

Der aktuelle Entwurf v CSS-Selektoren Level 4 gibt strukturelle Selektoren für Raster an. Wenn es implementiert ist, werden wir in der Lage sein, Dinge zu tun wie:

th.price,
th.price || td {
    text-align: right;
}

Natürlich hilft uns das heute nicht weiter – die anderen Antworten hier bieten dafür genügend praktische Ratschläge.