Verwenden von CSS, um nur die 2. Spalte einer Tabelle zu ändern

124

Wie kann ich das CSS nur der 2. Spalte einer Tabelle überschreiben, wenn ich nur CSS verwende?

Ich kann zu allen Spalten gelangen, indem ich:

.countTable table table td

Ich kann das HTML auf dieser Seite nicht aufrufen, um es zu ändern, da es nicht meine Website ist.

Vielen Dank.

css
quelle

238

Sie können die :nth-childPseudoklasse folgendermaßen verwenden:

.countTable table table td:nth-child(2)

Beachten Sie jedoch, dass dies in älteren Browsern (oder IE) nicht funktioniert. In diesem Fall müssen Sie den Zellen eine Klasse zuweisen oder Javascript verwenden.

Nick Craver
quelle

Dies gibt nur die zweite Zelle in jeder Tabelle an, nicht die zweite Zelle in jeder Zeile. Sie benötigen .countTable Tabelle Tabelle tr td: n-tes Kind (2)

Deeksy

3

@Deeksy - Das ist nicht genau, es ist egal, was der Selektor ist. nth-childwird angewendet, nachdem das Element gefunden wurde, und es wird nthmit dem übergeordneten Element verglichen, unabhängig davon, ob es sich in der Auswahl befindet oder nicht. Sie können dies hier sehen: jsfiddle.net/JQQPz

Nick Craver

Wie wäre es, wenn Sie nur das CSS eines Elements in td: nth-child (2) ändern? Wie <a> Tag. Wird es ein: n-tes Kind (2) {} sein?

Ivo San

1

@ ivory-santos füge einfach das aam Ende hinzu, z. B. td:nth-child(2) aum Links unter diesem Element zu stylen.

Nick Craver

Warum haben Sie zweimal eine Tabelle (im Gegensatz zu anderen Antworten unten)?

UlFie

26

Versuche dies:

.countTable table tr td:first-child + td

Sie können auch wiederholen, um die anderen Spalten zu formatieren:

.countTable table tr td:first-child + td + td {...} /* third column */
.countTable table tr td:first-child + td + td + td {...} /* fourth column */
.countTable table tr td:first-child + td + td + td +td {...} /* fifth column */

Marco Panichi
quelle

1

Ich entschied mich dafür in einer Situation, in der die Eigentümer der Site, die den Code verwaltet, keine Entwickler waren, und dies gab ihnen die Möglichkeit, die Ausrichtung der Spalten in ihren Datentabellen auf sehr einfache Weise zu ändern, obwohl dies ein wenig ausführlich ist, mit Kommentaren wie Sie haben es ihnen leicht gemacht zu wissen, welcher Auswahlblock für welche Spalte von links war. Wieder nicht die eleganteste und effizienteste Art, aber es hat funktioniert!

Eric Bishard

18

Verwenden Sie Folgendes, um nur die zweite Spalte einer Tabelle zu ändern:

Allgemeiner Fall:

table td + td{  /* this will go to the 2nd column of a table directly */

background:red

}

Dein Fall:

.countTable table table td + td{ 

background: red

}

Hinweis: Dies funktioniert für alle Browser (moderne und alte). Deshalb habe ich meine Antwort auf eine alte Frage hinzugefügt

Abzoozy
quelle

Was wäre die Optimierung, um nur die erste Spalte auszuwählen? Mit der Tabelle td {...} werden auch alle Zellen in anderen Spalten ausgewählt.

j4v1

1

@ j4v1 Tabelle td {Hintergrund: rot;} // erste Spalte hat rote Hintergrundtabelle td + td {Hintergrund: blau;} // Rest wird blau haben

Abzoozy

-2

Sie können für jede Zelle in der zweiten Spalte eine Klasse festlegen.

<table>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
</table>

Duniyadnd
quelle

Ich kann das nicht benutzen. Wie gesagt, dies ist nicht meine Seite und daher kann ich das HTML nicht ändern.

2

@Duniyadnd dies ist kein guter Ansatz im Vergleich zu der bestehenden Art der Verwendung von Selektoren.

PM

-2

Auf dieser Website http://quirksmode.org/css/css2/columns.html fand ich diesen einfachen Weg

<table>
<col style="background-color: #6374AB; color: #ffffff" />
<col span="2" style="background-color: #07B133; color: #ffffff;" />
<tr>..

DorienCragen
quelle

1

Er sagte, er könne den HTML-Code nicht ändern.

Frungi

Verwenden von CSS, um nur die 2. Spalte einer Tabelle zu ändern

Antworten: