我是否可以使用CSS对表格列着色而不着色单个单元格？ [英] Can I color table columns using CSS without coloring individual cells?

问题描述

有没有一种方法可以将色谱柱的颜色一直填满。请参阅下面的示例：

< table border =1> < TR> <的第i;电机和LT; /第> < th colspan =3>引擎< / th> <的第i;汽车和LT; /第> < 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> < / table>

寻找一种更好的方式（少代码，非个人着色）来着色，例如Engine和Body跨度，包括 #DDD

 < style> .color {background-color：#DDD}< / style>< table border =1> < TR> <的第i;电机和LT; /第> < th colspan =3class =color> Engine< / th> <的第i;汽车和LT; /第> < th colspan =2class =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>  

解决方案

是的，您可以...使用 <$ c $

  .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 =redspan =3/> < col class =blue/> < / COLGROUP> < THEAD> < TR> <的第i;＃< /第> < th colspan =3> color 1< / th>第二颜色2第二颜色< / TR> < / THEAD> < TBODY> < TR> <的第i; 1·/第> < TD>红色< / TD> < TD>红色< / TD> < TD>红色< / TD> < TD>蓝色< / TD> < / TR> < TR> <的第i; 2'; /第> < TD>红色< / TD> < TD>红色< / TD> < TD>红色< / TD> < TD>蓝色< / TD> < / TR> < / tbody>< / table>

注意：您可以使用 span 属性使col定义适用于多列。

另请参阅： < COLGROUP>

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

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

解决方案

Yes, you can... using the <col> element:

.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 span attribute to make the col definition apply to more than one column.
See also: <colgroup>}

这篇关于我是否可以使用CSS对表格列着色而不着色单个单元格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！