Highlight hover row and next row

Question

I am using this css to highlight the row on which is hovered.

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

My problem is I am using rowspan=2 so I need to highlight the rows in row span. What will be css for it.

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>

Screen shot of the problem. There is row span on this row, while I hovered it highlight only first row. enter image description here

Please provide some sample HTML, even better a functioning snippet (press ctrl + m when editing your question) — Jon P, Mar 13 '15 at 04:11
But you are using colspan only.. I didnt saw rowspan in your code? which one you want rowspan / colspan? — G.L.P, Mar 13 '15 at 04:19
The terminology in this question is confusing. Are you trying to highlight rows (the tr tag) or columns (the vertical stack)? — Will Reese, Mar 13 '15 at 04:20
And I don't think you can do this with pure css as you have to traverse back up the DOM, which CSS can't do: http://stackoverflow.com/questions/2000582/css-selector-for-foo-that-contains-bar — Jon P, Mar 13 '15 at 04:20
Then give us that rowspan html code.. so that we can try to give you solution? — G.L.P, Mar 13 '15 at 04:29

Maki · Accepted Answer · 2015-03-13T04:47:20.857

Unless I misunderstood you question

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

since you are using ".table", your table need to have have a "class named table" . Once you give it a class, it should work.

UPDATE

There are probably some other methods, but with pure HTML and CSS I guess you can do it like below.

group the tr with tbody, and hover the 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;
}

another 2 method I could think of is to A) use keep them in 1 row, and just use
B) if you want to give style to them separately
top text
bottom text — Maki, Mar 13 '15 at 04:50

score 0 · Answer 2 · answered Mar 13 '15 at 04:14

0

Try this

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

Need to write css for tr:hover

answered Mar 13 '15 at 04:14

user3129330

1
3

score 0 · Answer 3 · answered Mar 13 '15 at 04:18

0

Try this

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

answered Mar 13 '15 at 04:18

krishna kinnera

1,453
12
10

Highlight hover row and next row

3 Answers3