Использование CSS, как изменить только 2-й столбец таблицы

Question

Используя только css, как я могу переопределить css только 2-го столбца таблицы.

Я могу добраться до всех столбцов, используя:

.countTable table table td

Я не могу перейти к html на этой странице, чтобы изменить его, так как это не мой сайт.

Спасибо.

Answer 1

Вы можете использовать псевдо-класс :nth-child следующим образом:

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

Обратите внимание, что это не будет работать в старых браузерах (или IE), вам нужно будет дать ячейкам класс или использовать javascript в этом случае.

Answer 2

Попробуйте это:

.countTable table tr td:first-child + td

Вы также можете повторить, чтобы оформить другие столбцы:

.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 */

Answer 3

Чтобы изменить только второй столбец таблицы, используйте следующее:

Общий случай:

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

background:red

}

Ваш случай:

.countTable table table td + td{ 

background: red

}

Примечание: это работает для всех браузеров (современных и старых), поэтому я добавил свой ответ на старый вопрос

Answer 4

в этой сети http://quirksmode.org/css/css2/columns.html я нашел этот простой способ

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

Answer 5

Вы можете назначить класс для каждой ячейки во втором столбце.

<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>