Internet Explorer 11、table （表）でシャドウを表示する方法

通常、私個人ではネットを徘徊するためには「Internet Explorer」と「Google Chrome」を利用しています。まかりなりにもブログを運営していて、更にはスタイルシートを改良しているわけですから、人気のブラウザでの閲覧は当たり前かな、なんて生意気に。

本ブログでは、表と引用を多用していますので、少なくとも表と引用句、即ち、HTML の「table タグ」と「blockquate タグ」には、いろいろと目立たせるための装飾を施したいと考えています。

まずは、シャドウでも付けて簡単に・・・と思ったのですが、「Internet Explorer 11」で確認してみるとシャドウが登場しない！ところが「Google Chrome」では綺麗に登場しているシャドウが！どうして？

解決策が見つかったので、下記に示しておきます。

先ずは、オリジナルのテーマ「Frontier」にある table タグに関する CSS ファイルを確認しました。なんてことはない、単純でシンプル。このスタイルを「子テーマ」にある style.css に変更を加えれば良い。

単純に表にシャドウを出したいだけなので、「box-shadow」を以下のように追加（5 行目）しました。オリジナルだと小さな表も投稿記事いっぱいに広がってしまうので、「width: 98%;」を「width: auto;」へも変更しました（2 行目）。他の部分はそのまま。

上記だけで、「Google Chrome」では表にシャドウが登場してくれます。なかなか良い感じなんて自己満足して、「Internet Explorer 11」で確認してみると・・・あれっ、シャドウが見えない！最初は、「Internet Explorer 11」の設定が悪いのでは、と考えていろいろと確認しましたが、スタイルに関する設定なんてあったかな～ってふっと気が付いて・・・

そこで見つけたのが「IE9でドロップシャドウ（box-shadow）が効かない | ダリの雑記：WEBプログラム版」という投稿記事。どうやら table に border-collapse の設定に左右されるようです。ちょっと引用しておきます。

table のスタイルを「border-collapse:collapse;」にしているとダメみたい。その部分の table のみスタイルを「border-collapse: separate;」とし、解決しました。
出典：「IE9でドロップシャドウ（box-shadow）が効かない | ダリの雑記：WEBプログラム版」

そこで、上記に従って「border-collapse: separate;」に変更すると見事にシャドウが登場してくれました。しかし・・・今度は、表の全ての線で変な隙間が登場して、ちょっとうるさい！更にネットを調べると、「CSS3 – IE9でtableをbox-shadowで装飾する – Qiita」という投稿記事を発見！

そこで、リンク先に説明されているように「border-collapse: separate; border-spacing: 0;」と変更しました（下記、3 行目）。結局は、下記のような CSS コードへ修正しました！

上記で見事解決しました！「Internet Explorer 11」でも表にしっかりとシャドウが登場してくれました！嬉しいですね～問題解決の喜びを感じつつも「基本が解ってないな～」と反省もしかり。

関連する投稿記事リスト

下記に、本投稿記事と関連する投稿記事リストを自動生成しています。

自動生成は、投稿記事間の内容（80%）、カテゴリー（10%）、タグ（10%）を基準にして実施され、日付は公開日を示しています。ご興味があれば、是非、ご覧下さいませ。

• 2015年02月25日：表（table）にシャドウとグラデーションを付ける方法
• 2015年03月06日：【問題解決】アイコンフォント、Genericons が IE 11 で表示されない！
• 2015年04月03日：Internet Explorer 11 のお気に入りをバックアップ
• 2015年04月15日：引用符（blockquote）の CSS、content プロパティーを使いこなす！
• 2015年05月02日：カレンダーウィジェットの日付リンクを丸くする