Box Shadow Inside Tr Tag

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.

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>

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>

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>

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 on table cell is mis-aligned

Works if you add display: block; to td.color

td.color {
    -moz-box-shadow:inset 0 0 10px 0 #222;
    -webkit-box-shadow:inset 0 0 10px 0 #222;
    box-shadow:inset 0 0 10px 0 #222;
    border: 1px solid #000;
    display: block;
}

http://jsfiddle.net/jasongennaro/DjAfw/

tested on Chrome

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.

How do you use an inset box-shadow with a background-color with before and after?

You didn't specify how you want to accomplish the borders. In your title you box-shadow, but in your description you try to do it with borders:

Row should highlight on hover, cell should highlight a different color on hover, row should have 4px border on hover but cells should not shift up/down on hover.

I didn't do it with an actual border. Instead, I set an outline and just set an outline-offset. This should be what you're looking for.

table {  border-collapse: collapse;}
table tr td {  border: 1px solid black;  padding: 5px;}
table tr:hover {  background: yellow;  outline: 4px solid blue;  outline-offset: -4px;}
table tr td:hover {  background: red;}

<table>  <tbody>    <tr>      <td>AAA</td>      <td>BBB</td>      <td>CCC</td>      <td>DDD</td>    </tr>    <tr>      <td>AAA</td>      <td>BBB</td>      <td>CCC</td>      <td>DDD</td>    </tr>    <tr>      <td>AAA</td>      <td>BBB</td>      <td>CCC</td>      <td>DDD</td>    </tr>  </tbody></table>

Box-shadow is appearing in all columns in IE

I'd take a bit of a different approach, and assign the box shadow to the first th and td elements. This solution moves around the problem, rather than solving it - but is just as valid I feel.

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>

Box Shadow Inside Tr Tag