Korzystanie z CSS, jak zmienić tylko drugą kolumnę tabeli

126

Używając tylko CSS, jak mogę przesłonić CSS tylko drugiej kolumny tabeli.

Mogę dostać się do wszystkich kolumn za pomocą:

.countTable table table td

Nie mogę uzyskać dostępu do kodu HTML na tej stronie, aby go zmodyfikować, ponieważ nie jest to moja witryna.

Dzięki.

css

239

Możesz użyć :nth-childpseudoklasy w następujący sposób:

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

Pamiętaj jednak, że to nie zadziała w starszych przeglądarkach (lub IE), musisz w takim przypadku nadać komórkom klasę lub użyć javascript.

— Nick Craver
źródło

To da tylko drugą komórkę w każdej tabeli, a nie drugą komórkę w każdym wierszu. Potrzebujesz .countTable table table tr td: nth-child (2)

— Deeksy

3

@Deeksy - To nie jest dokładne, nie obchodzi go, jaki jest selektor. nth-childjest stosowany po znalezieniu elementu i jest nthporównywany z jakimkolwiek elementem nadrzędnym, bez względu na to, czy był w selektorze, czy nie. Możesz zobaczyć, jak to działa tutaj: jsfiddle.net/JQQPz

— Nick Craver

co powiesz na zmianę tylko css elementu wewnątrz td: nth-child (2). Podobnie jak tag <a>. czy to będzie td a: nth-child (2) {}?

— Ivo San

1

@ ivory-santos po prostu dodaj ana końcu, np. td:nth-child(2) aaby stylizować linki pod tym elementem.

— Nick Craver

Dlaczego masz tabelę dwa razy (w przeciwieństwie do innych odpowiedzi poniżej)?

— UlFie

26

Spróbuj tego:

.countTable table tr td:first-child + td

Możesz również powtórzyć, aby nadać styl pozostałym kolumnom:

.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
źródło

1

Zdecydowałem się na to w sytuacji, gdy właściciele serwisu utrzymującego kod nie byli programistami i to dało im możliwość zmiany wyrównania kolumn w swoich tabelach danych w bardzo prosty sposób, który choć trochę rozwlekły, z komentarzem typu masz tutaj, ułatwił im sprawdzenie, który blok selektora był dla której kolumny od lewej. Ponownie nie jest to najbardziej elegancki i skuteczny sposób, ale zadziałał!

— Eric Bishard

18

Aby zmienić tylko drugą kolumnę tabeli, użyj:

Przypadek ogólny:

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

background:red

}

Twój przypadek:

.countTable table table td + td{ 

background: red

}

Uwaga: działa to dla wszystkich przeglądarek (nowoczesnych i starych), dlatego dodałem odpowiedź na stare pytanie

— Abzoozy
źródło

Jaka byłaby poprawka, aby po prostu wybrać pierwszą kolumnę? Użycie tabeli td {...} powoduje również zaznaczenie wszystkich komórek w innych kolumnach.

— j4v1

1

@ j4v1 table td {background: red;} // pierwsza kolumna będzie miała czerwone tło table td + td {background: blue;} // reszta będzie miała kolor niebieski

— Abzoozy

-2

Możesz wyznaczyć klasę dla każdej komórki w drugiej kolumnie.

<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
źródło

Nie mogę tego użyć. Tak jak powiedziałem, to nie jest moja strona, więc nie mogę zmienić kodu HTML.

2

@Duniyadnd to nie jest dobre podejście w porównaniu do istniejącego sposobu używania selektorów.

— PM

-2

w tej witrynie http://quirksmode.org/css/css2/columns.html znalazłem ten łatwy sposób

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

— DorienCragen
źródło

1

Powiedział, że nie może modyfikować kodu HTML.

— Frungi