Чи можна фарбувати стовпці таблиці за допомогою 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>
Розгорніть фрагмент

І я шукаю кращий спосіб (менше коду, не індивідуальне забарвлення) для фарбування, наприклад, проміжки "Двигун" та "Кузов", включаючи всі комірки під ними в #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, і прийнятий відповідь був і все ще проголошується як божевільний
— Dennis
2
людям подобається дізнаватися те, чого вони не знали, будь то документована особливість розбору номерів jQuery або HTML-тег / концепція, яка робить акуратні речі, про них вони не знали :)
— Dennis
1
@canon хе так, будь-коли гідна відповідь ...
— Містер

Відповіді:

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
Використовувати файл, 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

Наступний реалізатор - це селектор-дочірка і повинен працювати ...

<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
Дякую за відповідь, це інше рішення
— Мохаммед Кермані
Це надмірність. Перевизначення погано для продуктивності. 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/

— Марків
джерело
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.