Table Row Box-Shadow on Hover (Webkit)

As answered here: https://stackoverflow.com/a/11002077/1106393 rather than styling tr you should style the td-element in combination with the pseudo classes :first-child and :last-child. Prepending tr:hover will do the trick for you:

tr:hover td {
    -moz-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
tr:hover td:first-child {
    -moz-box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
tr:hover td:last-child {
    -moz-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}

Demo 1 with inset: http://jsfiddle.net/Kk6Th/

Update:

Demo 2 without inset (classic drop shadow): http://jsfiddle.net/2nw4t/1/

Demo 3 without inset (glow effect): http://jsfiddle.net/2CSuM/

CSS box shadow on table row not displaying correctly

it seems that the z-index of a <tr> cannot be altered like you want so that the shadow appears above the rows with a background color.

This is imperfect, but you could set the BG colors on the <tr> elements like you are currently doing, and then set the hover box-shadow on the inner <td> elements like this

.search-table table tbody tr:hover td {
    box-shadow: 0px 0px 3px 0px #00000082;
}

It's not perfect since the inner horizontal borders between cells also gets the shadows, but it might be possible to set a custom shadow size/position per cell and have those applied.

Another alternative might be to keep what you have and use an inset shadow on the <tr> like this:

.search-table table tbody tr:hover {
    box-shadow: inset 0px 0px 3px 0px #00000082;
}

And then a final complex solution might be to use some JS to move a transparent element with a shadow around and position & size it correctly upon hovering each cell.

or... what I could do it just change the BG color of the row on hover and forget about the shadows!

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/

On mouseover on the even rows of a table the box shadow is not visible

Use drop-shadow instead of box-shadow, for example:

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>

Box Shadow on table row not appearing on certain browsers

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>

How to put space between rows of a table which also have box shadow effect on hover?

I think you need something like this!

   <style>
 body {
  background-color:#f1f4f9;
 }

 #tbstud {
  width:50%;
  border-collapse:collapse;
  text-align:center;
 }

 #tbstud th, #tbstud td {
  padding:15px;
  background-color:#ffffff;
 }

 #tbstud tr {
  -webkit-transition:box-shadow 0.3s linear;
  -moz-transition:box-shadow 0.3s linear;
  -o-transition:box-shadow 0.3s linear;
  -ms-transition:box-shadow 0.3s linear;
  transition:box-shadow 0.3s linear;
 }

 #tbstud tr:hover {
  -webkit-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 #tbstud .empty-td {
  border-left: none;
  border-right: none;
  background: transparent!important;
  padding: 5px;
 }
</style>
<table id="tbstud">
 <tr>
  <th>Sr. No.</th>
  <th>Roll No.</th>
  <th>Name</th>
  <th>Class</th>
  <th>Address</th>
 </tr>
 <tr>
  <td class="empty-td"></td>
 </tr>
 <tr>
  <td>1</td>
  <td>101</td>
  <td>Student 1</td>
  <td>MSc</td>
  <td>City 1</td>
 </tr>
 <tr>
  <td class="empty-td"></td>
 </tr>
 <tr>
  <td>2</td>
  <td>102</td>
  <td>Student 2</td>
  <td>BCA</td>
  <td>City 2</td>
 </tr>
 <tr>
  <td class="empty-td"></td>
 </tr>
 <tr>
  <td>3</td>
  <td>103</td>
  <td>Student 3</td>
  <td>BCA</td>
  <td>City 3</td>
 </tr>
 <tr>
  <td class="empty-td"></td>
 </tr>
 <tr>
  <td>4</td>
  <td>104</td>
  <td>Student 4</td>
  <td>BA</td>
  <td>City 4</td>
 </tr>
 <tr>
  <td class="empty-td"></td>
 </tr>
 <tr>
  <td>5</td>
  <td>105</td>
  <td>Student 5</td>
  <td>B.Tech.</td>
  <td>City 5</td>
 </tr>
</table>

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

Box Shadow inside TR tag

The only way I've found to enable a tr to show a box-shadow is to to set a display: block; on the tr element, though it means the row will no longer match the table width:

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 */
}

JS Fiddle demo.

This works on both Firefox 4 and Chromium 10.x, but fails on Opera 11.01 (all running on Ubuntu 10.10). I don't have access to either Mac or Windows, so I can't say how Safari, or IE will handle the display: block on tr elements, or even Firefox and Chrome running on different platforms.

Table Row Box-Shadow on Hover (Webkit)