CSS3

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

More than 3 years have passed since last update.


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