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

【问题标题】：Is it possible to highlight part of a colspan column in CSS?是否可以在 CSS 中突出显示 colspan 列的一部分？
【发布时间】：2020-01-24 00:39:25
【问题描述】：

我有一个看起来像这样的 HTML 表格：

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

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

我想要一个条纹表，其中列交替颜色，并在 colspan 行中生效。 IE。我想要这样的东西：

对我来说最简单的方法是什么？

谢谢

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

【问题讨论】：

你想试试这样吗？ jsfiddle.net/uxzd1cpr
不幸的是，这对我不起作用。我的用例比这里的例子要复杂一些，为了简单起见，我使用了这个例子。在我的情况下，我在 colspan 中有一个 div 元素，需要使用 colspan 来跨越多个列。

标签： html css html-table background background-color

【解决方案1】：

不确定这是否适用于您的实际表格，但您可以尝试以下方法：

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>$100</td>
    <td>Jack</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
    <td>Andrew</td>
  </tr>
  <tr>
    <td colspan="3">Sum: $180</td>
  </tr>
</table>
 
</body>
</html>

【讨论】：

我想我们需要你的准确性：stackoverflow.com/q/58434604/8620333 ;)