Таблицы начальной загрузки, использующие класс `table-hover` и" rowspan "в HTML, не выделяют (не отображают) даже строки, относящиеся к их основной категории - PullRequest
Новая
       6

Таблицы начальной загрузки, использующие класс `table-hover` и" rowspan "в HTML, не выделяют (не отображают) даже строки, относящиеся к их основной категории

0 голосов
/ 02 мая 2018 
<table class="table table-hover" border="1">
 <tbody>
 <tr>
   <td rowspan="2">potato</td>
   <td>1</td>
   <td>2</td>
   <td>3</td>
 </tr>
 <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
 </tr>
 <tr>
   <td rowspan="2">banana</td>
   <td>1</td>
   <td>2</td>
   <td>3</td>
 </tr>
 <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
 </tr>
 <tr>
   <td rowspan="2">apple</td>
   <td>1</td>
   <td>2</td>
   <td>3</td>
 </tr>
 <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
 </tr>
 </tbody>
</table>

Когда я использую класс наведения таблицы в таблице, используя rowspan, он не окрашивает полную строку, когда указывает на вторую строку в категории (по крайней мере, в моем конкретном примере).

Я хочу, чтобы он работал следующим образом:

  • При наведении курсора на четный ряд: он должен также изменить цвет bg его категории.
  • При наведении на категорию: он должен изменить цвет bg обеих строк, связанных с категорией.

Есть ли способ преодолеть эту ситуацию?

Предпочтительно только с использованием CSS

Вот jsfiddle для моего кода: https://jsfiddle.net/3t76xq66/1/

...