Table text overlaps table borders or is missing in Internet Explorer

Symptoms
When you use tables that contain block elements in Internet Explorer, you experience the following symptoms:

  • The inner text overlaps the table border.
  • Parts of the inner text are missing.

The following Internet Explorer versions are affected by this issue:

  • Internet Explorer 9 and Internet Explorer 10 in all document modes except Quirks
  • Internet Explorer 11 in all document modes except Edge and Quirks
Cause
This issue occurs because the table height does not adjust to accommodate a block-level element that exceeds this setting.
Resolution
To resolve this issue, we recommend that you do either of the following:

  • On Windows 10, use Microsoft Edge.
  • On other Windows versions, upgrade to Internet Explorer 11, and then render the page in Edge document mode.
Alternatively, you can change the HTML of the page. To do this, replace the DIV-tagged text by using an HTML table, as shown in the following example.

Original code

<!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>

Replacement code

<!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>
Properties

Article ID: 3121136 - Last Review: 03/30/2016 20:54:00 - Revision: 1.0

Windows Internet Explorer 9, Internet Explorer 10

  • KB3121136
Feedback