表漂浮在容器的内部阴影上

Question

假设我想将我的桌子放在一个带有内阴影的容器中，使它看起来像是在盒子里面或类似的东西。

问题是，当我给表格单元格一个背景颜色时，它们似乎将漂浮在容器的阴影上，使其不可见。

z-index似乎无法解决问题：

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

你可以在容器div中添加填充

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