表colgroup col样式与colspan不一致

时间:2017-01-21 15:38:07

标签: html css html-table col colgroup

我试图突出显示一个包含使用span属性的单元格的列,就像一个总体标题单元格一样。

我使用dir2colgroup标记以最明显的方式尝试了它。不幸的是,这会产生不一致的结果。一个总体单元格突出显示第一列,但不是连续的(见下面的示例)。

我可以看到,当在不同的cols上使用背景颜色时,如果突出显示那么整个单元格必须具有两种颜色,这是不可能的。因此,我认为最一致的结果是它没有颜色。也许有一些属性或者我可以设置得到一致的突出显示?

测试:https://jsfiddle.net/m13d2arf/1/

col
.highlight {
  background-color: red;
}
th, td {
  border: 1px solid;
}

1 个答案:

答案 0 :(得分:0)

作为一种解决方法,您可以覆盖第th个元素的背景颜色。

th {
  background-color: white;
}



.highlight {
  background-color: red;
}
th {
  background-color: white;
}
th, td {
  border: 1px solid;
}

<table>
  <colgroup>
    <col class="highlight">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th colspan="2">1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
    </tr>
  </tbody>
</table>

<br>

<table>
  <colgroup>
    <col>
    <col class="highlight">
  </colgroup>
  <thead>
    <tr>
      <th colspan="2">1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
    </tr>
  </tbody>
</table>
&#13;
&#13;
&#13;