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

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;
 }