html - 带有隐藏空单元格的桌子上的阴影效果不佳

Question

我有一个看起来像这样的表：

+-------------------------+
|        SECTION 1        |
+-------+--------+--------+
|       | TYPE 1 | TYPE 2 |
+-------+--------+--------+
| KEY 1 | Val 1  | Val 2  |
+-------+--------+--------+
| KEY 2 | Val 3  | Val 4  |
+-------+--------+--------+
        |    SECTION 2    |
        +--------+--------+
        | TYPE 1 | TYPE 2 |
        +--------+--------+
        | Data 1 | Data 2 |
        +--------+--------+
        | Data 3 | Data 4 |
        +--------+--------+
        | Data 5 | Data 6 |
        +--------+--------+

在桌子上使用border-collapse: separate; empty-cells: hide;正是我想要的，但是当我使用 应用 box-shadow 时box-shadow: 3px 3px 3px #CCC，阴影围绕着空白的左下角部分，而不是跟踪我上面显示的不规则表格边缘。

有没有人对我如何在这样的桌子上完成适当的投影有任何想法？这是一个jsfiddle：http: //jsfiddle.net/aCuSk/6/