Box Shadow on table row not appearing on certain browsers

css, css-tables

Solution

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.

Problem

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`.

Original source

Related problems