是否可以使用CSS对表列进行着色，而不对单个单元格进行着色？
是否可以使用CSS对表列进行着色，而不对单个单元格进行着色？
提问于 2014-12-02 02:07:25
有没有一种方法可以将列的跨度一直向下着色。请参见下面的开始示例：
<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>
我正在寻找一种更好的方法(更少的代码，非单独的着色)来着色，例如，"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>
回答 7
Stack Overflow用户
发布于 2014-12-02 02:17:04
您可以使用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>
Stack Overflow用户
发布于 2014-12-02 03:22:37
设置单元格的样式通常是最简单的(如果需要，可以按列)，但是可以用不同的方式设置列的样式。一种简单的方法是将列包装在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>
Stack Overflow用户
发布于 2014-12-02 02:19:22
为此，我将使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27234480
复制相关文章
相似问题
腾讯云开发者
