Mit nur CSS, wie kann ich die CSS nur der zweiten Spalte einer Tabelle überschreiben.Verwenden von CSS, wie nur die zweite Spalte einer Tabelle geändert wird
kann ich alle Spalten bekommen mit:
.countTable table table td
ich nicht auf die HTML-Datei auf dieser Seite erhalten können, sie zu ändern, da es nicht meine Seite ist.
Danke.
können Sie verwenden, um die :nth-child Pseudo-Klasse wie folgt:
.countTable table table td:nth-child(2)
Hinweis aber dies wird nicht mit älteren Browsern arbeiten (oder IE), werden Sie die Zellen eine Klasse geben müssen oder Javascript verwenden In diesem Fall.
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>
Ich kann das nicht verwenden. Wie ich schon sagte, das ist nicht meine Seite und so kann ich den HTML nicht ändern. –
@Duniyadnd dies ist kein guter Ansatz, verglichen mit der bestehenden Art der Verwendung von Selektoren. –
Try this:
.countTable table tr td:first-child + td
Sie auch, um wiederholen könnten die anderen Spalten stylen:
.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 */
Ich entschied mich dafür in einer Situation, in der die Besitzer der Seite, die den Code behielten, keine Entwickler waren und dies ihnen die Möglichkeit gab, die Ausrichtung von Spalten in ihren Datentabellen auf eine sehr direkte Art und Weise zu ändern, obwohl ein wenig ausführlich, mit Kommentar Wie Sie hier haben, haben sie es leicht gemacht zu wissen, welcher Selektorblock für welche Spalte von links war. Wieder nicht der eleganteste und effizienteste Weg, aber es hat funktioniert! –
Um nur dann zu ändern, die zweite Spalte einer Tabelle verwenden Sie die folgende:
Allgemeiner Fall:
table td + td{ /* this will go to the 2nd column of a table directly */
background:red
}
Ihr 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 i
Was wäre die Optimierung, nur die erste Spalte auszuwählen? Mit der Tabelle td {...} werden auch alle Zellen in anderen Spalten ausgewählt. – j4v1
@ j4v1 Tabelle td {Hintergrund: rot;} // erste Spalte wird roten Hintergrund haben Tabelle td + td {Hintergrund: blau;} // Rest wird blau haben – Abzoozy
lol jeder und ihre unnötige Phantasie – Unrelated
auf dieser Web-http://quirksmode.org/css/css2/columns.html So einfach gefunden
<table>
<col style="background-color: #6374AB; color: #ffffff" />
<col span="2" style="background-color: #07B133; color: #ffffff;" />
<tr>..
Er sagte, er könne ' t den HTML-Code ändern. – Frungi
Dies wird nur die zweite Zelle in jeder Tabelle, nicht die s geben zweite Zelle in jeder Reihe. Sie brauchen .countTable Tabelle Tabelle tr td: nth-Kind (2) – Deeksy
@Deeksy - Das ist nicht genau, es ist egal, was der Selektor ist. 'nth-child' wird angewendet, nachdem das Element gefunden wurde, und es ist' nth', verglichen mit dem übergeordneten Element, unabhängig davon, ob es im Selektor war oder nicht. Sie können dies hier sehen: http://jsfiddle.net/JQQPz/ –
Aber wer verwendet ältere Browser oder IE? ;) – Duncan