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

126

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

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

.countTable table table td

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

Спасибо.

css

239

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

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

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

— Ник Крейвер
источник

Это даст только вторую ячейку в каждой таблице, а не вторую ячейку в каждой строке. Вам нужен .countTable table table tr td: nth-child (2)

— Deeksy

3

@Deeksy - Это не совсем так, неважно, какой селектор. nth-childприменяется после нахождения элемента и nthсравнивается с любым родительским элементом, который у него есть, независимо от того, был он в селекторе или нет. Вы можете увидеть, как это работает здесь: jsfiddle.net/JQQPz

— Ник

как насчет изменения только CSS элемента внутри td: nth-child (2). Как тег <a>. это будет td a: nth-child (2) {}?

— Иво Сан

1

@ ivory-santos просто добавьте aв конец, например, td:nth-child(2) aчтобы стилизовать ссылки под этим элементом.

— Ник Крейвер

Почему у вас есть таблица дважды (в отличие от других ответов ниже)?

— UlFie

26

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

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

— Марко Паничи
источник

1

Я выбрал это в ситуации, когда владельцы сайта, поддерживающего код, не были разработчиками, и это дало им возможность изменять выравнивание столбцов в своих таблицах данных очень простым способом, хотя и немного подробным, с комментариями типа у вас есть здесь, чтобы им было легко узнать, какой блок селектора был для какого столбца слева. Опять же, не самый элегантный и эффективный способ, но он сработал!

— Эрик Бишард,

18

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

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

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

background:red

}

Ваш случай:

.countTable table table td + td{ 

background: red

}

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

— Abzoozy
источник

Что было бы за настройку, чтобы просто выбрать первый столбец? Использование таблицы td {...} также выбирает все ячейки в других столбцах.

— j4v1

1

@ j4v1 table td {background: red;} // первый столбец будет иметь красный фон table td + td {background: blue;} // остальные будут иметь синий цвет

— Abzoozy

-2

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

<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
источник

Я не могу это использовать. Как я уже сказал, это не моя страница, поэтому я не могу изменить html.

2

@Duniyadnd это не лучший подход по сравнению с существующим способом использования селекторов.

— PM,

-2

в этом Интернете 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>..

— DorienCragen
источник

1

Он сказал, что не может изменять HTML.

— Frungi