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: 3px 3px 3px #CCC、上に示した不規則なテーブル エッジをトレースする代わりに、影が空白の左下部分を囲みます。

このようなテーブルで適切なドロップシャドウを実現する方法について、誰かアイデアはありますか? ここに jsfiddle があります: http://jsfiddle.net/aCuSk/6/