Как стилизовать каждую ячейку таблицы в столбце через CSS?

У меня есть обычная таблица HTML:

<table>
  <tr>
    <td class="first-column-style">FAT</td> 
    <td>...</td>
  </tr>
  <tr>
    <td class="first-column-style">FAT</td>
    <td>...</td>
  </tr>
</table>

Я хочу применить стиль CSS к каждой ячейке таблицы (td) в определенном столбце. Возможно ли это сделать без применения атрибута class/style к каждой ячейке таблицы в этом столбце и без JavaScript?

Ответы

Ответ 1

Используйте тег <col> и стилизуйте его, следуя этому руководству. Таким образом, вам нужно только добавить класс (или спецификацию встроенного стиля) к элементу <col> вместо каждого <td> в таблице.

Предостережения:

Любой стиль строки или ячейки заменяет стиль столбца.
Тег <col> поддерживает только стили border, background, width и visibility (и их производные, такие как background-color).
Объявление border не работает, если <table> не имеет border-collapse: collapse;, а поведение между браузерами несовместимо.
Объявление visibility не работает должным образом в Chrome из-за известной ошибки.

Ответ 2

В дополнение к решению Sean Patrick Floyd вы можете объединить :first-child с соседним селектором sibling + (также не поддерживаемым IE6):

td:first-child { /* first column */ }

td:first-child + td { /* second column */ }

td:first-child + td + td { /* third column */ }

/* etc. */

Ответ 3

2015, и на основе ответа первого ребенка, но MUCH cleaner.

https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child

td:nth-child(1) { /* first column */ }
td:nth-child(2) { /* second column */ }
td:nth-child(3) { /* third column */ }

Супер чистый код

Ответ 4

Хорошо для первого и последнего столбцов вы можете использовать псевдо-класс :first-child и :last-child:

/* make the first cell of every row bold */
tr td:FIRST-CHILD{
    font-weight:bold;
}

/* make the last cell of every row italic */
tr td:LAST-CHILD{
    font-style:italic;
}

Справка:

: first-child и: last-child

Ответ 5

Следующее позволяет создавать столбцы на уровне таблицы и может использоваться более общим способом для предыдущих примеров, так как вам не нужно делать предположения о стилях, применяемых к данному индексу столбца в таблице стилей сам по себе.

Я согласен с тем, что подход <col> лучше всего подходит, если он соответствует вашим потребностям, но диапазон стилей очень ограничен.

Примеры стилей столбцов 1, 2 и 4 с серым текстом.

HTML

<table class="example col1-readonly col2-readonly col4-readonly">

CSS

.example.col1-readonly tr td:nth-child(1),
.example.col2-readonly tr td:nth-child(2),
.example.col3-readonly tr td:nth-child(3),
.example.col4-readonly tr td:nth-child(4) {
    color:#555;
}

Ответ 6

Это старый пост. Но у меня был тот же вопрос. Найдено, что это работает:

<!DOCTYPE html>
<html>
<head>
<style>
tr:nth-child(3)>td:nth-child(2){background: red;}
</style>
</head>
<table>
<tr><td></td><td>A</td><td>B</td><td>C</td></tr>
<tr><td>1</td><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>2</td><td>A2</td><td>B2</td><td>C2</td></tr>
<tr><td>3</td><td>A3</td><td>B3</td><td>C3</td></tr>
</table>
</html>

Эта настройка стиля устанавливает красный цвет фона в третьей строке и втором столбце,