El texto de la tabla se superpone a los bordes de la tabla o falta en Internet Explorer

  • Artículo
  • Tiempo de lectura: 2 minutos

Importante

La aplicación de escritorio Internet Explorer 11 está retirada y sin soporte a partir del 15 de junio de 2022 para determinadas versiones de Windows 10.

Todavía puede acceder a sitios antiguos heredados que requieren Internet Explorer con el modo Internet Explorer en Microsoft Edge. Obtenga más información.

La aplicación de escritorio Internet Explorer 11 se redirigirá progresivamente al explorador Microsoft Edge, más rápido y seguro. En última instancia, se deshabilitará a través de Windows Update. Deshabilite IE hoy.

Este artículo proporciona soluciones para resolver la situación en la que el texto de la tabla se superpone al borde o se pierde en la página web debido al alto de la tabla en Internet Explorer no puede ajustar los elementos de nivel de bloque que se han establecido.

Versión del producto original:   Internet Explorer 11, Internet Explorer 10, Internet Explorer 9
Número KB original:   3121136

Síntomas

Al usar tablas que contienen elementos de bloque en Internet Explorer, experimenta los síntomas siguientes:

  • El texto interno se superpone al borde de la tabla.
  • Faltan partes del texto interno.

Este problema afecta a las siguientes versiones de Internet Explorer:

  • Internet Explorer 9 y Internet Explorer 10 en todos los modos de documento excepto Quirks.
  • Internet Explorer 11 en todos los modos de documento excepto Edge y Quirks.

Causa

Este problema se produce porque el alto de la tabla no se ajusta para dar cabida a un elemento de nivel de bloque que supera esta configuración.

Solución

Para resolver este problema, se recomienda realizar una de las siguientes acciones:

  • En Windows 10, use Microsoft Edge.

  • En otras Windows, actualice a Internet Explorer 11 y, a continuación, represente la página en modo de documento perimetral.

  • Como alternativa, puede cambiar el CÓDIGO HTML de la página. Para ello, reemplace el texto etiquetado por DIV mediante una tabla HTML, como se muestra en el ejemplo siguiente.

    Código original

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

    Código de reemplazo

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