Box-Shadow on Tr'S

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/

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.

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>

box-shadow on tr's

"Many of the elements used within tables are neither block nor inline elements."

For this reason setting all TR to block is most likely breaking the natural table behavior.

EDIT: I was able to create a solution similar to your desired effect however it requires that the columns have fixed width.

Demo: http://jsfiddle.net/jFdEY/2/

Technically this isn't a table anymore though, just appears as such.

css box-shadow for table row?

Lower the z-index of the next cells:

.yellow {
  background-color: yellow;
}

td {
  width: 40px;
}

tr:first-child {
  box-shadow: 1px 1px 5px 5px #d99292;
}

tr:first-child  + tr td {
  position: relative;
  z-index: -1;
}

/* the below is not mandatory but to make sure 
the cells doesn't go below the table */
table {
  position:relative;
  z-index:0;
}

<table>
  <tr>
    <td class=yellow>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td class=yellow>4</td>
  </tr>
</table>

How to overlap box-shadows on table rows?

You can achieve it using ::before and ::after pseudo elements to mask the top and bottom shadow from "middle" row.

The height of the pseudo elements is set exactly equal to the length of the shadow for masking and is absolute position.

Since the shadow hides the top borders of selected-bottom and it's next sibling element we need to add them back as:

tr.selected-middle td,
tr.selected-bottom td {
  border-bottom: 1px solid #666;
}

body {

  background-color: #1b1b1b;

  margin: 20px;

}

table {

  font-family: arial, sans-serif;

  border-collapse: collapse;

  width: auto;

  box-sizing: border-box;

  border: none;

  margin: auto;

}

tr { display: block; }

tr, td {

  height: 50px;

  background: #333;

  color: #eee;

}

td {

  padding-left: 16px;

  min-width: 170px;

  width: 100%;

  border-top: 1px solid #666;

}

tr.selected-top {

    position: relative;

    box-shadow: -5px -5px 5px #000, 5px -5px 5px #000;

}

tr.selected-middle {

    position: relative;

    box-shadow: 0px 0px 5px 5px #000;

}

tr.selected-bottom {

    position: relative;

    box-shadow: 5px 5px 5px #000, -5px 5px 5px #000;

    

}

tr.selected-middle ::before,

tr.selected-middle ::after {

    pointer-events: none;

    position: absolute;

    content:" ";

    background-color: #333;

    left: 0;

    width: 100%;

}

tr.selected-middle ::before {

    height: 10px;

    top: -10px;

}

tr.selected-middle ::after {

    top: calc(100% + 4px);

    height: 5px;

}

tr.selected-middle td,

tr.selected-bottom td {

  border-bottom: 1px solid #666;

}

<table>

  <tbody>

    <tr>

        <td>Some stuffs</td>

    </tr>

    <tr class="selected-top">

        <td>highlighting starts</td>

    </tr>

    <tr class="selected-middle">

        <td>highlighting middle</td>

    </tr>

    <tr class="selected-bottom">

        <td>highlighting ends</td>

    </tr>

     <tr>

        <td>Some stuffs</td>

    </tr>

  </tbody>

</table>

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!

css inset box-shadow for table row?

You may also give a try to mix-blend-mode

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

.yellow{
    background-color: yellow;
    mix-blend-mode:multiply
}
td{
    width:40px;
}
tr:first-child {
    box-shadow: inset 1px 1px 5px 5px #d99292;
 /*optionnal :
    background:white ; 
  to avoid .yellow mixing eventually with body, or else background */
}

<table>
    <tr>
        <td class=yellow>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td class=yellow>4</td>
    </tr>
</table>

Boder radius and shadow for table row

Apply the border radius to the table rows like this, which will remove the ugly corners:

.tr-body {
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

This will make all 4 corners of the row have a radius of 10px. In your example, you applied the box shadow to the table row, and therefore the shape of the shadow will be the shape of the element it is applied on, which was originally a rectangle. Applying border-radius: 10px; to the table row will change the shape of the row elements and thus also change the shape of the shadow that they produce.

Also, I can see your logic when applying the borders to the data cell elements, but the way you've done it is unnecessary, and you could simply apply border: 1px solid #d1d1d1; to the table row element or .tr-body class.