Можно ли выделить часть столбца colspan в CSS? - PullRequest
Новая
       164

Можно ли выделить часть столбца colspan в CSS?

1 голос
/ 24 сентября 2019

У меня есть HTML-таблица, которая выглядит примерно так:

image

Я установил цвета, используя группы.

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

Мне бы хотелось иметь полосатую таблицу, в которой столбцы чередуются с цветами, и это должно действовать в строках colspan.Т.е. я хочу что-то вроде этого:

image

Какой самый простой способ для меня это сделать?

Спасибо

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

1 Ответ

2 голосов
/ 24 сентября 2019

Не уверен, что это сработает для вашей реальной таблицы, но вы можете попробовать что-то вроде этого: 

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