我可以使用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>
这是一个老问题，有很多很好的答案。 只是想添加尚未提及的-n和nth-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/
