是否可以在 CSS 中突出显示 colspan 列的一部分？

Question

我有一个 HTML table 看起来像这样：

我已经使用 colgroups 设置了颜色。

  <colgroup>
    <col style="background-color:lightgrey">
    <col style="background-color:white">
    <col style="background-color:lightgrey">
  </colgroup>

我想要的是有条纹的 table，其中列交替颜色，以便在 colspan 行中生效。 IE。我想要这样的东西：

对我来说实现这一目标的最简单方法是什么？

谢谢

JSfiddle：https://jsfiddle.net/kq1hnmuw/7/

Answer 1

不确定这是否适用于您的实际 table，但您可以尝试这样的操作：

table {
  overflow:hidden;
}
tr:first-child > th {
  position:relative;
}
tr:first-child > th::before {
  content: '';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:-1000px; /* i.e. minus of any value that is greater than the height of your table */
  background-color:lightgrey;
  z-index:-1;
}
tr:first-child > th:nth-child(2)::before {
  background-color:white;
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<table border>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Name</th>
  </tr>
  <tr>
    <td>January</td>
    <td>0</td>
    <td>Jack</td>
  </tr>
  <tr>
    <td>February</td>
    <td></td>
    <td>Andrew</td>
  </tr>
  <tr>
    <td colspan="3">Sum: 0</td>
  </tr>
</table>
 
</body>
</html>

是否可以在 CSS 中突出显示 colspan 列的一部分？

Is it possible to highlight part of a colspan column in CSS?

html

css

background

html-table

background-color