我可以使用CSS颜色表格列而不着色单个单元格吗?

有没有一种方法可以完全列出色彩的范围。 请看下面的例子:

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

而且我正在寻找更好的方法(less代码,非个人着色)来着色,例如“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> 

是的,您可以…使用<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> 

你可以使用第nth-childselect器:

 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> 

对单元格进行样式设置通常是最简单的(如果需要,可以按列),但可以用不同的方式对列进行样式设置。 一个简单的方法是将列包装在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> 

你可以使用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> 

下面的工具的第n个孩子的select,应该工作…

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

我的版本使用nth-childexpression式:

使用级联规则的CSS概念首先为单元格着色,然后使我想要透明的单元格变成无色。 第一个select器select第一个select器之后的所有单元格,第二个select器select第五个单元格为透明的。

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

我会用这个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; } 
 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> 

这是一个老问题,有很多很好的答案。 只是想添加尚未提及的-nnth-last-childselect器。 在将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/