Html 我可以使用 CSS 为表格列着色而不为单个单元格着色吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27234480/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I color table columns using CSS without coloring individual cells?
提问by Dennis
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
我正在寻找一种更好的方法（更少的代码，非个人着色）来着色，例如，“引擎”和“身体”跨度，包括它们下面的所有单元格 #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>回答by canon
Yes, you can... using the <col>element:
是的，你可以......使用<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>Note: You can use the spanattribute to make the col definition apply to more than one column.
See also: <colgroup>
注意：您可以使用该span属性使 col 定义应用于多个列。
另见：<colgroup>
回答by Markus Kottl?nder
You can use the nth-childselector for that:
您可以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>回答by Jukka K. Korpela
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 colgroupelement and set styles on it. Example:
设置单元格样式通常是最简单的（如果需要，可以按列），但可以以不同的方式设置列的样式。一种简单的方法是将列包装在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>回答by leo60228
You can use CSS3: http://jsfiddle.net/snuggles08/bm98g8v8/
您可以使用 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>回答by Howard Renollet
I would use the nth-childcss pseudo-class for this:
我会为此使用nth-childcss 伪类：
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>回答by eat-sleep-code
The following implement's the nth-child selector and should work...
以下实现是第 n 个子选择器，应该可以工作...
<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>
回答by Marcs
My version using nth-child expressions:
我的版本使用 nth-child 表达式：
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.
使用级联规则的 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>Check this interesting reference: http://learn.shayhowe.com/advanced-html-css/complex-selectors/
检查这个有趣的参考：http: //learn.shayhowe.com/advanced-html-css/complex-selectors/
回答by elPastor
This is an old question with a lot of great answers. Just wanted to add the -nand nth-last-childselectors 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.
这是一个古老的问题，有很多很好的答案。只是想添加尚未提及的-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/
jsFiddle：https://jsfiddle.net/3rpf5oht/2/
