Compartir a través de

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

Advertencia

La aplicación de escritorio retirada y sin soporte de Internet Explorer 11 ha sido deshabilitada permanentemente a través de una actualización de Microsoft Edge en ciertas versiones de Windows 10. Para obtener más información, consulte Preguntas frecuentes sobre la retirada de la aplicación de escritorio de Internet Explorer 11.

En este artículo se proporcionan soluciones para resolver la situación en que el texto de la tabla se superpone al borde o se pierde en la página web. Esto ocurre porque Internet Explorer no puede ajustar correctamente los elementos de nivel de bloque definidos con el alto de la tabla.

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

Síntomas

Cuando se usan tablas que contienen elementos de bloque en Internet Explorer, se experimentan los siguientes síntomas:

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

Las siguientes versiones de Internet Explorer se ven afectadas por este problema:

  • Internet Explorer 9 e Internet Explorer 10 en todos los modos de documento excepto modo 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 acomodar un elemento de nivel de bloque que supere 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 versiones de Windows, actualice a Internet Explorer 11 y, a continuación, represente la página en modo documento de Edge.

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