Могу ли я раскрасить столбцы таблицы с помощью CSS, не раскрашивая отдельные ячейки?

121

Есть ли способ полностью раскрасить промежутки столбцов. См. Пример запуска ниже:

<table border="1">
  <tr>
    <th>Motor</th>
    <th colspan="3">Engine</th>
    <th>Car</th>
    <th colspan="2">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>7</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>
Развернуть фрагмент

И я ищу лучший способ (меньше кода, неиндивидуальная окраска) раскрасить, например, промежутки "Engine" и "Body", включая все ячейки под ними в #DDD

<style>
  .color {
    background-color: #DDD
  }
</style>
<table border="1">
  <tr>
    <th>Motor</th>
    <th colspan="3" class="color">Engine</th>
    <th>Car</th>
    <th colspan="2" class="color">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td class="color">4</td>
    <td>5</td>
    <td class="color">6</td>
    <td class="color">7</td>
  </tr>
  <tr>
    <td>7</td>
    <td class="color">1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td>4</td>
    <td class="color">5</td>
    <td class="color">6</td>
  </tr>
</table>
Развернуть фрагмент

html  css 
— Деннис
источник
20
@zipzit: В таблицах нет ничего плохого, если вам действительно нужна таблица, то есть если данные имеют табличный характер (например, таблица продуктов с ценами). Таблицы критикуют против использования их в качестве инструмента компоновки.
— sleske
5
Интересно, как это вошло в Горячие Сетевые Вопросы
— Мистер Чужой
его спросили вчера, и на данный момент он имеет 24 положительных голоса по Q и 43 по A, а принятый ответ был и все еще набирается как сумасшедший
— Деннис
2
Людям нравится изучать то, чего они не знали, будь то задокументированная особенность парсинга чисел jQuery или HTML-тег / концепция, которые делают полезные вещи, о которых они не знали :)
— Деннис
1
@canon хе да, в любом случае достойный ответ ...
— Mr. Alien

Ответы:

167

Да, вы можете ... используя <col>элемент:

.grey {
  background-color: rgba(128,128,128,.25);
}
.red {
  background-color: rgba(255,0,0,.25);
}
.blue {
  background-color: rgba(0,0,255,.25);
}
<table>
  <colgroup>
    <col class="grey" />
    <col class="red" span="3" />
    <col class="blue" />
  </colgroup>
  <thead>
    <tr>
      <th>#</th>
      <th colspan="3">color 1</th>
      <th>color 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>red</td>
      <td>red</td>
      <td>red</td>
      <td>blue</td>
    </tr>
    <tr>
      <th>2</th>
      <td>red</td>
      <td>red</td>
      <td>red</td>      
      <td>blue</td>
    </tr>
  </tbody>
</table>
Развернуть фрагмент

Примечание . Вы можете использовать spanатрибут, чтобы определение столбца применялось более чем к одному столбцу.
Смотрите также :<colgroup>

— канон
источник
10
Обратите внимание, что вам понадобятся <col span="3" />промежуточные столбцы.
— Niet the Dark Absol 01
Бессмысленно использовать colgroup, содержащий все столбцы.
— Юкка К. Корпела
14
@ JukkaK.Korpela Он анализируется таким образом независимо от того, указали вы это или нет - просто так <tbody>. Я просто предпочитаю уточнять.
— canon
Я вижу, что этот colтег используется не так часто, но я всегда использую его для ширины столбцов
— Koen.
3
Если кому-то еще интересно, почему это работает или какие свойства CSS можно использовать для столбцов, соответствующие разделы спецификации CSS 2.1 - 17.3 и 17.5.1 .
— меритон
18

Для этого можно использовать nth-childселектор:

tr td:nth-child(2),
tr td:nth-child(3) {
  background: #ccc;
}
<table>
  <tr>
    <th colspan="2">headline 1</th>
    <th>headline 2</th>
  </tr>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
  </tr>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
  </tr>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
  </tr>
</table>
Развернуть фрагмент

— Маркус Коттлендер
источник
1
colСами стили намного лучше (чище и быстрее).
— tomasz86
9

Как правило, проще всего стилизовать ячейки (при желании по столбцам), но столбцы можно стилизовать по-разному. Один простой способ - обернуть столбцы в colgroupэлементе и установить для него стили. Пример:

<style>
.x {
    background-color: #DDD
}
</style>
<table border="1">
<col>
<colgroup class=x>
  <col>
  <col>
  <col>
</colgroup>
<col>
<colgroup class=x>
  <col>
  <col>
</colgroup>
  <tr>
    <th>Motor</th>
    <th colspan="3" class="color">Engine</th>
    <th>Car</th>
    <th colspan="2" class="color">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td class="color">4</td>
    <td>5</td>
    <td class="color">6</td>
    <td class="color">7</td>
  </tr>
  <tr>
    <td>7</td>
    <td class="color">1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td>4</td>
    <td class="color">5</td>
    <td class="color">6</td>
  </tr>
</table>
Развернуть фрагмент

— Юкка К. Корпела
источник
1
Если отдельные colэлементы внутри colgroups не нужно стилизовать индивидуально, вы также можете установить spanатрибут для самого colgroupсебя - <colgroup span="2">- вместо того, чтобы размещать colэлементы внутри него.
— misterManSam
5

Вы можете использовать CSS3: http://jsfiddle.net/snuggles08/bm98g8v8/

<style>
  .table td:nth-of-type(1) {
    background: red;
  }
  .table td:nth-of-type(5) {
    background: blue;
  }
  .table td:nth-of-type(3) {
    background: green;
  }
  .table td:nth-of-type(7) {
    background: lime;
  }
  .table td:nth-of-type(2) {
    background: skyblue;
  }
  .table td:nth-of-type(4) {
    background: darkred;
  }
  .table td:nth-of-type(6) {
    background: navy;
  }
</style>
Styled table:
<table border="1" class="table">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>7</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>
<hr>Unstyled table:
<table border="1" class="table2">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>7</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>
Развернуть фрагмент

— leo60228
источник
5

Я бы использовал nth-childдля этого псевдокласс css:

tr td:nth-child(2), tr th:nth-child(2), tr td:nth-child(3), tr td:nth-child(4), tr th:nth-child(4), tr td:nth-child(6), tr td:nth-child(7){
    background-color: #DDD;
}

Показать фрагмент кода

— Говард Ренолле
источник
5

Следующий реализует селектор nth-child и должен работать ...

<style type="text/css">
    th:nth-child(2),
    th:nth-child(4)
    {
        background-color: rgba(255, 0, 0, 1.0);
    }

    td:nth-child(2), 
    td:nth-child(3),
    td:nth-child(4),
    td:nth-child(6),
    td:nth-child(7)
    {
        background-color: rgba(255, 0, 0, 0.5);
    }
</style>
— едят сон-код
источник
Вы, вероятно, хотите, чтобы >между tr и td, так как вы столкнулись с проблемой выбора tds только внутри trs только внутри таблиц ... (обратите внимание на группы таблиц.)
— ANeves 02
Спасибо за ответ, это другое решение
— Мохаммад Кермани
Это перебор. Чрезмерное определение плохо сказывается на производительности. table tr tdявляется избыточным, поскольку tds всегда внутри trи table.
— tomasz86
4

Моя версия с использованием выражений nth-child:

Используя CSS-концепцию каскадных правил, сначала раскрасьте ячейки, а затем раскрасьте те, которые я хочу сделать прозрачными. Первый селектор выбирает все ячейки после первой, а второй выбирает пятую ячейку как прозрачную.

<style type="text/css">
  /* colored */
  td:nth-child(n+2) { background-color: #ddd }
  /* uncolored */
  td:nth-child(5) { background-color: transparent }
</style>

<table border="1">
  <tr>
    <th>Motor</th>
    <th colspan="3">Engine</th>
    <th>Car</th>
    <th colspan="2">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>7</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>
Развернуть фрагмент

Проверьте эту интересную ссылку: http://learn.shayhowe.com/advanced-html-css/complex-selectors/

— Marcs
источник
1

Это старый вопрос, на который есть много отличных ответов. Просто хотел добавить селекторы -nи nth-last-child, о которых еще не упоминалось. Они полезны при применении CSS к нескольким столбцам, но могут не знать количество столбцов до стилизации или иметь несколько таблиц с разной шириной.

/* Select the first two */
table tr td:nth-child(-n + 2) {
  background-color: lightblue;
}

/* Select all but the first two */
table tr td:not(:nth-child(-n + 2)) {
    background-color:lightgreen;
}

/* Select last two only */
table tr td:nth-last-child(-n + 2) {
  background-color:mistyrose;
}

/* Select all but the last two */
table tr td:not(:nth-last-child(-n + 2)) {
    background-color:yellow;
}

jsFiddle: https://jsfiddle.net/3rpf5oht/2/

— elPastor
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.