IE9でtableをbox-shadowで装飾する

IE9でbox-shadowが効かない

IE9ではtable要素にbox-shadowをつけても効かない場合があります。table要素に「border-collapse: collapse;」が指定されていると適用されません。

border-collapse:collapse;が指定されたtable内要素には、外側の影はつきません。

対処法

• tableに「border-collapse: separate;」を指定する。
• box-shadowを指定している要素に対して、「border-collapse:separate」を指定する。

tableに「border-collapse: separate;」を指定する。

tabel要素に「border-collapse: separate;」をつけることでshadowが表示されます。
tableとセルの間にスペースが入るのが嫌な場合は、「border-spacing: 0;」を付与します。

HTML

<table>
    <tbody>
    <tr><td>
    <div class="box">box</div>
    </td></tr>
    <tr><td>td</td></tr>
    <tr><td>td</td></tr>
    </tbody>
</table>

css

table{
    border-collapse: separate;
    border-spacing: 0;
    border: #ccc 1px solid;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
}
td{
    border-bottom: #ccc 1px solid;
    background: #e7f4fc;
    width: 200px;
    padding: 15px;
}
.box{
    background: #ccc;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
}