次の方法で共有

表のテキストが表の罫線と重なっているか、Internet Explorer に表示されない

警告

廃止され、サポート対象外となった Internet Explorer 11 デスクトップ アプリケーションは、特定のバージョンの Windows 10 で Microsoft Edge の更新プログラムを通じて完全に無効になります。 詳細については、「Internet Explorer 11 デスクトップ アプリの廃止に関する FAQ」をご覧ください。

この記事では、Internet Explorer のテーブルの高さが設定されているブロック レベルの要素を調整できないために、表のテキストが罫線と重なったり、Web ページで失われたりする状況を解決するためのソリューションを提供します。

元の製品バージョン: Internet Explorer 11、Internet Explorer 10、Internet Explorer 9
元の KB 番号: 3121136

症状

Internet Explorer でブロック要素を含むテーブルを使用すると、次の現象が発生します。

  • 内側のテキストはテーブルの罫線と重なります。
  • 内部テキストの一部が見つかりません。

この問題の影響を受ける Internet Explorer のバージョンは次のとおりです。

  • Internet Explorer 9 と Internet Explorer 10 (クイック モードを除くすべてのドキュメント モード)。
  • Edge と Quirks を除くすべてのドキュメント モードの Internet Explorer 11。

原因

この問題は、テーブルの高さが、この設定を超えるブロック レベルの要素に合わせて調整されないために発生します。

決議

この問題を解決するには、次のいずれかの操作を行うことをお勧めします。

  • Windows 10 では、Microsoft Edge を使用します。

  • 他の Windows バージョンでは、Internet Explorer 11 にアップグレードし、Edge ドキュメント モードでページをレンダリングします。

  • または、ページの HTML を変更することもできます。 これを行うには、次の例に示すように、HTML テーブルを使用して DIV タグ付きテキストを置き換えます。

    元のコード

    <!DOCTYPE HTML>
<html>
<body>
    <table style="border: 1px solid blue; height: 50px">
        <tr>
            <td style="height: 100%">
                <div style="height: 100%">
                    This text overlaps<br />
                    the<br />
                    blue<br />
                    border<br />
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

    置換コード

    <!DOCTYPE HTML>
<html>
<body>
    <table style="border: 1px solid blue; height: 50px">
        <tr>
            <td style="height: 100%">
                    <table>
                    <tr>
                        <td>
                            This text fits within<br />
                            the<br />
                            blue<br />
                            border<br />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>