Can I color table columns using CSS without coloring individual cells?

Question

Is there a way to color spans of columns all the way down. See, starting example below:

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

And I am looking for a better way (less code, non-individual coloring) to color, for example, "Engine" and "Body" spans, including all the cells underneath them in #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>

@zipzit: There's nothing wrong with tables if you actually *need* a table - i.e. if the data is tabular in nature (like a table of products with prices). The criticism of tables is against using them as a layout tool. — sleske, Dec 02 '14 at 10:28
it was asked yesterday and as of right now, has 24 upvotes on Q and 43 on A, and the accepted Answer was and is still being upvoted like crazy — Dennis, Dec 02 '14 at 14:43
@Mr.Alien Something similar happened with [this question](http://stackoverflow.com/q/26126017/621962). I'm not sure why it got so many votes so quickly but I'm hesitant to ask too many questions since my answer benefits from the attention. :P — canon, Dec 02 '14 at 14:54
people like to learn things they didn't know, be it a documented peculiarity of jQuery number parsing, or an HTML tag/concept that does neat things, they didn't know about :) — Dennis, Dec 02 '14 at 15:01

score 184 · Accepted Answer · edited Dec 08 '14 at 19:01

184

Yes, you can... using the <col> element:

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

_{Note: You can use the span attribute to make the col definition apply to more than one column.

See also: <colgroup>}

edited Dec 08 '14 at 19:01

Moak

12,596
27
111
166

answered Dec 01 '14 at 18:11

canon

40,609
10
73
97

10

Note that you'll need `` for the spanning columns. – Niet the Dark Absol Dec 01 '14 at 18:11
It’s rather pointless to use a `colgroup` that contains all columns. – Jukka K. Korpela Dec 01 '14 at 18:29
14

@JukkaK.Korpela It gets parsed that way regardless of whether or not you specify it -just like ``. I simply prefer to specify. – canon Dec 01 '14 at 19:03
I see that the use of the `col` tag is not that common, but I use it always for column widths – Koen. Dec 02 '14 at 23:25
4

In case anybody else is curious why this works, or which CSS properties can be used on columns, the pertinent sections of the CSS 2.1 spec are [17.3](http://www.w3.org/TR/CSS2/tables.html#columns) and [17.5.1](http://www.w3.org/TR/CSS2/tables.html#table-layers). – meriton Dec 03 '14 at 22:30
@netrox Why earlier? Did you do that by JavaScript before? – Mohammad Kermani Feb 16 '16 at 06:56

score 24 · Answer 2 · edited Dec 03 '14 at 08:27

24

You can use the nth-child selector for that:

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>

edited Dec 03 '14 at 08:27

Bo A

3,144
2
33
49

answered Dec 01 '14 at 18:17

Markus Kottländer

8,228
4
37
61

1

Styling `col` themselves is way better than this (cleaner and faster). – tomasz86 May 21 '16 at 13:26

Jukka K. Korpela · Answer 3 · 2014-12-09T15:01:22.483

It is generally simplest to style cells (by column if desired), but columns can be styled, in different ways. One simple way is to wrap columns in a colgroup element and set styles on it. Example:

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

If the individual `col` elements inside the `colgroup`s don't need to be styled individually, you can also set the `span` attribute on the `colgroup` itself - `` - *instead* of placing `col` elements inside it. — misterManSam, Dec 09 '14 at 14:21

Howard Renollet · Answer 4 · 2014-12-12T14:35:59.980

I would use the nth-child css pseudo-class for this:

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

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

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

eat-sleep-code · Answer 5 · 2016-05-23T15:56:54.393

5

The following implement's the nth-child selector and should work...

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

edited May 23 '16 at 15:56

answered Dec 01 '14 at 18:21

eat-sleep-code

4,753
13
52
98

You probably want a `>` between tr and td, since you went to the trouble of selecting tds only inside trs only inside tables... (mind the tablegroups.) – ANeves Dec 02 '14 at 17:32
Thanks for answer, this is different solution – Mohammad Kermani Feb 16 '16 at 06:57
This is an overkill. Over-specifying is bad for performance. `table tr td` is redundant as `td`s are always inside `tr` and `table`. – tomasz86 May 21 '16 at 13:29

score 5 · Answer 6 · answered Dec 03 '14 at 20:27

You can use 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>

Marcs · Answer 7 · 2014-12-09T13:50:20.227

My version using nth-child expressions:

Using the CSS concept of cascade rules to first coloring the cells and then to uncolor the ones i want to be transparent. The first selector selects all the cells after the first one, and the second one selects the fifth cell to be transparent.

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

Check this interesting reference: http://learn.shayhowe.com/advanced-html-css/complex-selectors/

elPastor · Answer 8 · 2017-05-23T00:58:50.360

This is an old question with a lot of great answers. Just wanted to add the -n and nth-last-child selectors that haven't yet been mentioned. They're helpful when applying CSS to multiple columns but may not know the number of columns prior to styling, or have multiple tables with varying widths.

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

Can I color table columns using CSS without coloring individual cells?

8 Answers8

Linked

Related