Since Box-shadow Cannot Be Used On Display:table-row Elements, How Can I Mimic A Table And Use Box-shadow On The Pseudo-row Elements?

It's already been confirmed that it's not possible to add a box-shadow to a display:table-row element in a way that's compatible with all the major browsers. For reasons that bogg

Solution 1:

This can help

but it calculates with fix height of a row and need span in td (but it could not be a problem in the table)

http://codepen.io/michalkliment/pen/dWzwEG

(tested in safari (ipad/mac) / chrome / IE10 / firefox)

<table>
  <tr>
    <td><span>Celll 1111</span></td>
    <td><span>Celll 222</span></td>
  </tr>
  <tr>
    <td><span>Cellll 33</span></td>
    <td><span>Cell 4</span></td>
  </tr>
</table>