Box Shadow on Table Row Not Appearing on Certain Browsers

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>

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

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/

Internet Explorer - CSS box-Shadow on table not working for IE browser

I applied box-shadow on td instead of tr with some changes in css and that works for chrome / safari / IE11 / EDGE

Here is working link : https://jsfiddle.net/h9tx9tpx/2/

Working code :

      // css file
        table tbody tr {
            background-color:#13326b;
            color:#ffffff;
            text-shadow: 1px 2px #000000;
        }

        table tbody tr {
            height:70px;
        }

        table {
            border-collapse: separate;  
        }

        td:first-child:before{
            box-sizing: border-box;
            content:'';
            position:absolute;

            left:0;
            right:2px;

            display: block;
            height: 60px;
            box-shadow: inset 6px 0px 0px -1px #ff0000;
            -webkit-box-shadow: inset 6px 0px 0px -1px #ff0000;
        }

How to add box-shadow to a CSS div with display:table-row?

You actually cannot have this work through all majors browsers without breaking the table-layout by resetting display to another value.

display:table-row; is the default display of <tr> table elements, wich where not supposed to be styled, just holding a row of cells (td / th ).
thead, tbody, tfoot would be the same, just containers to hold the table-layout.

Each browser will manage this their own way, firefox will accept it, IE will show only the last one where previous ones will lay underneath unseen and webkit won't show anything. The limit seems to draw a border depending (or not) on border-collapse value.

A turn around could be to used pseudo elements: http://codepen.io/gc-nomade/pen/NNRVmd

table, .table {  padding:0;  margin:1em;  display:inline-table; /* for the show */  border-spacing:2px;  background:yellow;  vertical-align:top;}td, .td {  padding:1em;  display:table-cell;  background:lightgray;;}tr, .tr {  display:table-row;}
/* fix ? */table, .table {  position:relative;/* needed to set width to pseudos */}td:first-child:after,.td:first-child:after{  pointer-events:none;  content:'';  position:absolute;  padding:1em;/* equals padding of td */  margin-top:2px;  /* do not use top and bottom */  left:0;  right:2px;  box-shadow: 2px 3px 2px;}td:last-child,.td:last-child{  box-shadow:6px 1px 2px -2px;/* finish the drawing on entire height of row */}

<table>  <tr>    <td>Celll 1111</td>  <td>Celll 222</td>  </tr>  <tr>    <td>Cellll 33</td>    <td>Cell 4</td>  </tr></table>
<div class=table>  <div class=tr>    <div class=td>Celll 1111 111</div>  <div class=td>Celll 222</div>  </div>  <div class=tr>    <div class=td>Cellll 33</div>    <div class=td>Cell 4</div>  </div></div>

tr {
    -moz-box-shadow: inset 0 0 5px #888;
    -webkit-box-shadow: inset 0 0 5px #888;
    box-shadow: inset 1px 1px 5px #888;
    display: block;
}

td {
    padding: 0.5em; /* Just to spread things out a bit */
}

tr th:first-child, tr td:first-child {  box-shadow: 2px 0 0px #888 inset;}

<table border=0 cellsapcing=0 cellpadding=6>  <tr>    <th>Column</th>    <th>Column</th>    <th>Column</th>    <th>Column</th>  </tr>  <tr>    <td>Column</td>    <td>Column</td>    <td>Column</td>    <td>Column</td>  </tr></table>

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:hover {
  filter: drop-shadow(0 0 0.275rem rgba(255, 0, 0, 0.75));
}

tr:nth-child(even) {
  background-color: #dddddd;
}

tr:nth-child(odd) {
  background-color: #ffffff;
}

<h2>HTML Table</h2>

<h4>
  Onmouseover on the even row the box shadow is not completely visible
</h4>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>