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

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>

79315 次浏览
小开
最佳答案

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>

小开

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>

小开

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>

小开

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

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>

小开

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/

小开

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>

小开

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/


提交答案