Box Shadow on table row not appearing on certain browsers

Question

CSS box-shadow on table rows - tr - doesn't seem to be working consistently across browsers. On some browsers the shadow is displayed; on others, there is no shadow.

I'm using the following CSS:

tr {   background-color: rgb(165, 182, 229);   box-shadow: 0px 2px 2px black;   -moz-box-shadow: 0px 2px 2px black;   -webkit-box-shadow: 0px 2px 2px black; } td, th {   padding: 5px;   text-align: left; } 

Here is a jsFiddle of the below snippet:

tr {    background-color: rgb(165, 182, 229);    box-shadow: 0px 2px 2px black;    -moz-box-shadow: 0px 2px 2px black, ;    -webkit-box-shadow: 0px 2px 2px black;  }  td, th {    padding: 5px;    text-align: left;  }

<table>    <tr>      <td>&nbsp;</td>      <th>One</th>      <th>Two</th>    </tr>    <tr>      <th>Title</th>      <td>Three</td>      <td>Four</td>    </tr>    <tr>      <th>Title2</th>      <td>Five</td>      <td>Six</td>    </tr>    <tr>      <th>Title3</th>      <td>Seven</td>      <td>Eight</td>    </tr>    <tr>      <th>Title4</th>      <td>Nine</td>      <td>Ten</td>    </tr>  </table>

Note: The same behavior is observed when substituting <tr> with <div> and adding display: table-row.

Answer 1

As previously mentioned, box-shadow property works only with elements that have display: block or display:inline-block property.

If you'll add display: block to the table cell as a general styling rule, it will collapse, since automatic width/height proportions that cells had with display:table won't be applied anymore. To simulate that behavior just assign min-width attribute to each th and td.

Then apply box-shadow to the row (on hover or without).

In summary, your code should look like this:

table { box-sizing: border-box; } td, th { padding-left: 16px; min-width: 170px; text-align: left; } tr { display: block; } tr:hover { box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.5); cursor: pointer; } 

I've omitted vendor prefixes for simplicity.

Here is the full example:

table {    box-sizing: border-box;    border-bottom: 1px solid #e8e8e8;  }  td,  th {    padding-left: 16px;    min-width: 170px;    border: 1px solid #e8e8e8;    border-bottom: none;    font: 14px/40px;    text-align: left;  }  td {    color: #666;  }  tr {    display: block;  }  th {    color: #333;  }  tr:hover {    background-color: #fbfbfb;    box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.5);    cursor: pointer;  }

<table cellpadding="0" cellspacing="0">    <thead>      <tr>        <th>Phone number</th>        <th>Date</th>        <th>Name</th>        <th>Label</th>      </tr>    </thead>    <tbody>      <tr>        <td>0342443</td>        <td>10 August 2013</td>        <td>Kate</td>        <td>Loves cats</td>        </td>        <tr>          <td>0342442</td>          <td>9 August 2013</td>          <td>Mary</td>          <td>Boring</td>        </tr>        <tr>          <td>0342441</td>          <td>8 August 2013</td>          <td>Anna</td>          <td>Loves extreme stuff</td>        </tr>    </tbody>  </table>

You can also check out the fiddle here.

Answer 2

Use transform scale(1,1) property with box-shadow it will solve the problem.

tr:hover {   transform: scale(1);   -webkit-transform: scale(1);   -moz-transform: scale(1);   box-shadow: 0px 0px 5px rgba(0,0,0,0.3);   -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);   -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3); } 

Fiddle: https://jsfiddle.net/ampicx/5p91xr48/

Thanks!!