Question

我正在使用此css突出显示悬停的行。

.table tbody tr:hover td, .table tbody tr:hover th {
    background-color: #eeeeea;
}

我的问题是我正在使用rowspan=2所以我需要突出显示行范围中的行。什么是css。

HTML

<table class="table">
<thead>
  <tr>
    <th></th>
    <th width="10%" >Req ID</th>
    <th width="10%">Date</th>
    <th width="5%">Qty</th>
    <th colspan="3" width="45%">Plant Info</th> 
    <th width="10%">Picture</th>
    <th width="10%">Pic type</th>
    <th width="30%" >Action</th>

  </tr>
</thead>
<tbody>


 <tr>
    <td rowspan="2"></td>
    <td rowspan="2"></td>
    <td rowspan="2"></td>
    <td rowspan="2"></td>
    <td></td>
    <td></td>
    <td></td>
    <td rowspan="2"></td>
    <td rowspan="2"></td>   
    <td rowspan="2"></td>
  </tr>
  <tr>
    <td colspan="3"></td>
  </tr>
   <tr>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
        <td></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>   
        <td rowspan="2"></td>
      </tr>
      <tr>
        <td colspan="3"></td>
      </tr>


</tbody>

问题的屏幕截图。这一行有行间距，而我只是突出显示第一行。 enter image description here

Answer 1

除非我误解了你的问题

.table tbody td:hover, .table tbody th:hover {
background-color: #eeeeea;
}

OR

.table tbody tr td:hover, .table tbody tr th:hover {
background-color: #eeeeea;
}

因为你使用“.table”，你的表需要有一个“类命名表” 。一旦你给它上课，它应该有效。

更新

可能还有其他一些方法，但是使用纯HTML和CSS我猜你可以像下面这样做。

将tr与tbody分组，并将tbody悬停。

HTML

<table class="table" border=1>
    <thead>
        <tr>
            <th></th>
            <th width="10%">Req ID</th>
            <th width="10%">Date</th>
            <th width="5%">Qty</th>
            <th colspan="3" width="45%">Plant Info</th>
            <th width="10%">Picture</th>
            <th width="10%">Pic type</th>
            <th width="30%">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">asd</td>
            <td rowspan="2">d</td>
            <td rowspan="2">s</td>
            <td rowspan="2">d</td>
            <td>asd</td>
            <td>asd</td>
            <td>asd</td>
            <td rowspan="2">asd</td>
            <td rowspan="2">ds</td>
            <td rowspan="2">asd</td>
        </tr>
        <tr>
            <td colspan="3"></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td rowspan="2"></td>
            <td rowspan="2"></td>
            <td rowspan="2"></td>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
            <td></td>
            <td rowspan="2"></td>
            <td rowspan="2"></td>
            <td rowspan="2"></td>
        </tr>
        <tr>
            <td colspan="3"></td>
        </tr>
    </tbody>

CSS

.table tbody:hover {
    background-color:yellow;
}

Answer 2

试试这个

.table tbody tr:hover, .table tbody tr th:hover {
    background-color: #eeeeea;
}

需要为tr：hover

编写css

Answer 3

试试这个

.table tr:hover td, .table tr:hover th {
    background-color: #eeeeea;
}

突出显示悬停行和下一行

3 个答案: