Question

Say I want to place my table inside a container with inner shadow, to make it look like it’s deep inside a box or something like that.

The problem is, when I give my table cells a background color, they seem to float over the container’s shadow, making it invisible.

z-index doesn’t seem to solve the problem:

http://jsfiddle.net/h9Fdm/

CSS:

 .container {
     box-shadow: inset 0px 0px 5px black;
     float: left;
     width: 100%;
 }
 table{
     width: 100%;
     float: left;
 }
 table tr td{
     background-color: #ccc        
 }

html:

<div class="container">
<table>
    <tr>
        <td>fdsa</td>
        <td>fdsafdsa</td>
    </tr>
</table>
</div>​

Answer 1

you could add padding the the container div

.container {
     box-shadow: inset 0px 0px 5px black;
     float: left;
     width: 100%;
     padding: 20px;
 }