IE11でテーブルの枠線が消えるバグの対処方法

IE11でテーブルの枠線が消える

久しぶりにIE11でハマったのでメモ。

SafariやChromeでは表示されているのにも関わらず、IE11でテーブルの枠線が消えてしまっていた。

原因としては

tdの背景色がtdにつけた枠線の上から重なってしまい色が上書きされていた。
開発者ツールでbackgroundの要素のチェックを外すと枠線色は表示される。

サンプルコード

この場合、tdにposition:relativeと背景色をつけてborderをつけると,
IE11で見たときにborderが背景色に重なり消えてしまう。
<table>
    <tr>
        <th class="required">項目A</th>
        <td>項目内容</td>
    </tr>
<table>       

対処方法

tdの中の要素をブロック要素で囲み、中の要素にposition:relativeを付け替える。

<table>
<tr>
    <th>
        <div class="required">
        項目A
        </div>
    </th>
    <td>項目内容</td>
</tr>
<table>