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