我可以在不为单个单元格上色的情况下使用CSS来对表格列进行着色吗？

121

有没有一种方法可以使列的跨度一直向下着色。请参阅下面的开始示例：

<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>
展开摘要

html  css 
— 丹尼斯
source
20
@zipzit：如果您确实需要表格，则表格没有任何问题-即，如果数据本质上是表格形式的（例如带有价格的产品表格）。对表的批评反对将它们用作布局工具。
— sleske 2014年
5
想知道如何进入这个网络热点问题
— 外国人先生
它是昨天被问到的，截至目前，它在Q上有24个投票，在A上有43个投票，而被接受的答案曾经并且仍在疯狂地被投票
— Dennis
2
人们喜欢学习他们不知道的东西，无论是记录的jQuery数字解析的特殊性，还是可以完成事情的HTML标记/概念，他们都不知道:)
— Dennis
1
@canon heh是的，反正还是不错的答案……
— Alien先生

Answers:

167

是的，您可以...使用<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>
展开摘要

注意：您可以使用该span属性使col定义应用于多个列。
另请参阅：<colgroup>

— 佳能
source
10
请注意，您需要<col span="3" />跨栏。
— Niet the Dark Absol 2014年
使用colgroup包含所有列的a毫无意义。
— Jukka K. Korpela 2014年
14
@ JukkaK.Korpela无论您是否指定它，都将以这种方式进行解析-就像like一样<tbody>。我只是喜欢指定。
— 2014年
我看到col标记的使用并不常见，但我总是将其用于列宽
— Koen。
3
如果有人好奇为什么这样做或可以在列上使用哪些CSS属性，则CSS 2.1规范的相关部分为17.3和17.5.1。
— Meriton 2014年
18

您可以使用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>
展开摘要

— 马库斯·科特兰德
source
1
样式col本身比这更好（更干净，更快）。
— tomasz86 '16
9

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

— Jukka K.Korpela
source
1
如果s中的各个col元素colgroup不需要分别设置样式，则还可以span在其colgroup自身上设置属性<colgroup span="2">-- 而不是在其中放置col元素。
— misterManSam 2014年
5

您可以使用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>
展开摘要

— leo60228
source
5

我将为此使用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;
}

显示代码段

— 霍华德·雷诺莱特
source
5

以下实现是第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>
— 吃代码
source
您可能想要>在tr和td之间输入，因为您遇到了麻烦，只能在表内部的trs中选择tds ...（注意表组。）
— ANeves 2014年
感谢您的回答，这是不同的解决方案
— Mohammad Kermani
这太过分了。过度指定不利于性能。table tr td由于tds始终位于tr和中，因此是多余的table。
— tomasz86 '16
4

我的版本使用nth-child表达式：

使用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>
展开摘要

检查此有趣的参考：http : //learn.shayhowe.com/advanced-html-css/complex-selectors/

— 马克
source
1

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

— 埃尔帕斯托
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.