George George - 3 months ago 14
CSS Question

Box Shadow on table row not appearing on certain browsers

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
.

Answer

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.