How to add a box shadow to a table tr element upon hover?

Question

So I am attempting to add a box shadow to my table tr element upon hover.

Currently, it is working perfectly in Firefox, but no other browser.

CSS:

table tbody tr:hover {
    background-color:#13326b;
    color:#ffffff;
    text-shadow: 1px 2px #000000;
    box-shadow: 0px 0px 10px #ff0000;
    -webkit-box-shadow: 0px 0px 10px #ff0000;
    -moz-box-shadow: 0px 0px 10px #ff0000;
}

HTML:

<table class="table table-list-search">
        <thead>
            <tr>
                <th>Logo</th>
                <th>Name</th>
                <th>Symbol</th>
                <th>Sector</th>
                <th>Sub-Sector</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Sample</td>
                <td>Filter</td>
                <td>12-11-2011 11:11</td>
                <td>OK</td>
                <td>123</td>
            </tr>
            <tr>
                <td>Try</td>
                <td>It</td>
                <td>11-20-2013 08:56</td>
                <td>It</td>
                <td>Works</td>
            </tr>
            <tr>
                <td>§</td>
                <td>$</td>
                <td>%</td>
                <td>&</td>
                <td>/</td>
            </tr>
        </tbody>
    </table>

Here is an image of how it displays in Firefox:

enter image description here

Here is an image of how it displays in Chrome:

enter image description here

DEMO HERE

How could I edit my CSS to apply this box shadow hover for all browsers?

Adding `display: block` to the tr may work in some cases, but is not ideal. Try adding style to `tr:hover td` instead. — davur, Mar 24 '14 at 05:25

jignesh kheni · Accepted Answer · 2014-03-24T06:11:56.203

7

This is your css i edited

table { 
   box-sizing: border-box; 
   border-bottom: 1px solid #e8e8e8; 
}
table tbody tr:hover {
   background-color:#13326b;
   color:#ffffff;
   text-shadow: 1px 2px #000000;
   box-shadow: 0px 0px 10px #ff0000;
   -webkit-box-shadow: 0px 0px 10px #ff0000;
   -moz-box-shadow: 0px 0px 10px #ff0000;
}
 td, th { 
    padding-left: 16px; 
    min-width: 170px; 
    text-align: left; 
}
tr { 
    display: block; 
}
table tbody tr , table tbody td{
    height:100px;
}

Here is demo link - http://jsfiddle.net/Gx7Uy/6/

edited Mar 24 '14 at 06:11

answered Mar 24 '14 at 05:13

jignesh kheni

1,282
1
9
22

Works well, although it seems to disrupt the layout of the table heading – Fizzix Mar 24 '14 at 05:21
1

Shortly tr{ display: block} -> It is a remedy and a problem, the td,th block tries to mimic the normal array – nicolallias Jan 06 '15 at 14:55
display block on the table row causes all the reasons to actually use a table brake. Might as well use div's in the first place. – Mark Baijens Feb 12 '18 at 15:38
Unfortunately, if we will add background color for all elements then this solution won't work – Sergey Volkov Jul 13 '20 at 12:34

score -9 · Answer 2 · edited May 23 '17 at 12:31

-9

try something like this,FIDDLE

tr { display: block; }

For explanation check this out

Box Shadow on table row not appearing on certain browsers

edited May 23 '17 at 12:31

Community

1
1

answered Mar 24 '14 at 05:18

rajesh kakawat

10,826
1
21
40

3

As stated to user1153551, `display block` disrupts the entire tables layout. – Fizzix Mar 24 '14 at 05:19
Who voted up? This is totally bad response! – actimel Oct 14 '14 at 11:27

How to add a box shadow to a table tr element upon hover?

2 Answers2

Linked