it-swarm.com.de

Gibt es eine Möglichkeit, die Textausrichtung der gesamten Spalte in einer Tabelle festzulegen?

Gibt es eine einfache Möglichkeit, die Textausrichtung aller Zellen in der zweiten Spalte auf right festzulegen?

Oder besteht die einzige Möglichkeit darin, die Ausrichtung für jede Zelle in der Spalte festzulegen?

(Leider wird das align -Attribut des col -Tags in Firefox nicht unterstützt.)

45
Misha Moroshko

Fügen Sie jeder Zelle in der 2. Spalte eine Klasse hinzu.

.second {
   text-align: right;
}

Sie könnten auch CSS3 verwenden.

tr td:nth-child(2) { /* I don't think they are 0 based */
   text-align: right;
}

(Funktioniert nicht in <= IE8)

44
alex

Obwohl ich nicht besonders elegant bin, wirf ich so etwas gerne in meine Site-weite CSS-Datei:

.tr1 td:nth-child(1), .tr1 th:nth-child(1),
.tr2 td:nth-child(2), .tr2 th:nth-child(2),
.tr3 td:nth-child(3), .tr3 th:nth-child(3),
.tr4 td:nth-child(4), .tr4 th:nth-child(4),
.tr5 td:nth-child(5), .tr5 th:nth-child(5),
.tr6 td:nth-child(6), .tr6 th:nth-child(6),
.tr7 td:nth-child(7), .tr7 th:nth-child(7),
.tr8 td:nth-child(8), .tr8 th:nth-child(8),
.tr9 td:nth-child(9), .tr9 th:nth-child(9) { text-align:right }

.tc1 td:nth-child(1), .tc1 th:nth-child(1),
.tc2 td:nth-child(2), .tc2 th:nth-child(2),
.tc3 td:nth-child(3), .tc3 th:nth-child(3),
.tc4 td:nth-child(4), .tc4 th:nth-child(4),
.tc5 td:nth-child(5), .tc5 th:nth-child(5),
.tc6 td:nth-child(6), .tc6 th:nth-child(6),
.tc7 td:nth-child(7), .tc7 th:nth-child(7),
.tc8 td:nth-child(8), .tc8 th:nth-child(8),
.tc9 td:nth-child(9), .tc9 th:nth-child(9) { text-align:center }

Geben Sie dann einfach an, welche Spaltennummern zentriert oder rechtsbündig sein sollen, d. H., Wenn die Spalten 2 und 7 rechtsbündig und 3 zentriert sein sollen:

<table class="tr2 tc3 tr7">

Während das CSS nicht besonders elegant ist, sind die Alternativen noch weniger elegant: d. H. Eine benutzerdefinierte Klasse für jede Tabelle oder die Anforderung, dass jede tr ein class="ralign" o.ä.

Funktioniert nicht mit IE8

14
Stephen Fuhry

Ich glaube, dass das Folgende funktionieren würde und keine Annotation der zweiten Zelle jeder Zeile mit einer Klasse erforderlich wäre.

td:first-child + td { text-align: right; }

Diese Regel würde einen td unmittelbar nach einem td auswählen, der das erste untergeordnete Element seines übergeordneten Elements ist. In einer typischen Tabelle würde dies die zweite Zelle in jeder Zeile auswählen.

14
smarcaurele

Ein bisschen zu spät zur Party, aber ich hatte dieses Problem gerade selbst, also dachte ich, ich würde eine Lösung teilen. Es ist erwähnenswert, dass diese Antwort nur anwendbar ist, wenn Sie LESS verwenden.

Anstatt die Klasse oder den Stil manuell jeder Zelle hinzufügen zu müssen, können Sie Schleifen in LESS verwenden, um einen Klassenbereich zu erstellen, den Sie auf Ihre Tabellen anwenden können:

// Loop for @i until @i = @n
// Much like - for($i=0; $i<=$n; $i++)
//
.table-cols(@n, @i: 1) when (@i =< @n)
{
    [email protected]{i}
    {
        tr > td:nth-child(@{i})
        {
            text-align: center;
        }
    }

    [email protected]{i}
    {
        tr > td:nth-child(@{i})
        {
            text-align: right;
        }
    }

    // Continue the iteration
    .table-cols(@n, (@i + 1));
}

.table-cols(16);

Dies erzeugt eine Menge Klassen wie .table-center-col-1 bis .table-center-col-16 (in diesem Beispiel) und zentrieren den Text der entsprechenden Spalte. Dies gilt auch für rechtsbündigen Text mit .table-right-col-n.

Sie können die angegebene Anzahl (von 16) auf einen beliebigen Wert einstellen, um sicherzustellen, dass die maximale Anzahl von Spalten in einer Tabelle abgedeckt wird. Bei variablen Spaltennummern ist dies für Sie keine große Hilfe.

Dann müssen Sie es nur noch auf die Tabelle anwenden:

<table class="table-center-col-4">
    <thead>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>x</td>
            <td>x</td>
            <td>x</td>
            <td>x</td>
            <td>x</td>
        </tr>
    </tbody>
</table>

Alle Zellen in der 4. Spalte haben jetzt zentrierten Text.

1
Luke

Das Hinzufügen einer Klasse zu jeder Zelle oder Zelle in einer Zeile in der zweiten Spalte funktioniert.

.second {
   text-align: right;
}

oder

füge class zu tr hinzu und füge das folgende CSS in dein Stylesheet ein.

tr.second {
   text-align: right;
}
0
Vijender Reddy