Contenedor div de desbordamiento de tabla 100%


137

Tengo problemas con una tabla html que desborda su contenedor principal.

.page {
    width: 280px;
    border:solid 1px blue;
}

.my-table {
    word-wrap: break-word; 
}

.my-table td {
    border:solid 1px #333;
}
<div class="page">
    <table class="my-table">
        <tr>
            <th>Header Text</th>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
            <th>Header Text</th>
        </tr>
        <tr>
            <td>An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – pélagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]</td>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
            <td>An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – pélagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]</td>
        </tr>
    </table>    
</div>

¿Cómo puedo forzar que tanto el texto del encabezado como el texto de la celda de la tabla se ajusten de manera que quepan en su contenedor correctamente? Preferiría un método solo de CSS, pero también estoy abierto a usar Javascript (o jQuery) si es absolutamente necesario.

Respuestas:


253

Desde una perspectiva puramente "hacer que encaje en el div", agregue lo siguiente a su clase de tabla ( jsfiddle ):

table-layout: fixed;
width: 100%;

Establezca los anchos de columna como desee; de lo contrario, el algoritmo de diseño fijo distribuirá el ancho de la tabla de manera uniforme en sus columnas.

Para una referencia rápida, aquí están los algoritmos de diseño de tabla, el énfasis es mío:

  • Fijo ( fuente )
    Con este algoritmo (rápido), el diseño horizontal de la tabla no depende del contenido de las celdas; solo depende del ancho de la tabla, el ancho de las columnas y los bordes o el espacio entre celdas.
  • Automático ( fuente )
    En este algoritmo (que generalmente no requiere más de dos pasadas), el ancho de la tabla viene dado por el ancho de sus columnas [, según lo determinado por el contenido] (y los bordes intermedios ).

    [...] Este algoritmo puede ser ineficiente ya que requiere que el agente de usuario tenga acceso a todo el contenido de la tabla antes de determinar el diseño final y puede exigir más de una pasada.

Haga clic en la documentación de origen para ver los detalles de cada algoritmo.


54

Intenta agregar

word-break: break-all 

al CSS en su elemento de tabla.

Eso hará que las palabras en las celdas de la tabla se rompan de manera que la tabla no crezca más de lo que contiene el div, sin embargo, las columnas de la tabla todavía tienen un tamaño dinámico. jsfiddle demo .


10
Aún mejor conword-wrap: break-word;
Apolo

1
@Apolo - ¡De acuerdo! También lo utilicé en mi demo jsfiddle original (vea el enlace en el cuerpo de la respuesta anterior).
Jon Schneider

1
Los navegadores de parpadeo tienen word-break: break-wordcuál funciona mejor.
Volvox

es mejor usar overflow-wrappropiedad en su lugar, ya que está estandarizado
Romko

18

Agregar display: block;y overflow: auto;para .my-table. Esto simplemente cortará cualquier cosa que supere el 280pxlímite que usted impuso. No hay forma de hacer que "se vea bonita" con ese requisito debido a palabras como las pélagosthroughque son más amplias que 280px.


Solo para mi caso: necesitaba que la tabla se ajustara a todo el ancho principal (en resoluciones altas), así que rodeé la tabla con un div y le apliqué sus estilos. Ahora la tabla intenta usar todo el ancho del elemento primario, pero si el contenido de la tabla se desborda, aparece la barra de desplazamiento.
manuman94

2

Intenta agregar a td:

display: -webkit-box; // to make td as block
word-break: break-word; // to make content justify

los tds desbordados se alinearán con una nueva fila.


1

Bueno, dadas sus limitaciones, creo que configurar overflow: scroll;el .pagediv es probablemente su única opción. 280 px es bastante estrecho, y dado su tamaño de fuente, el ajuste de palabras solo no lo hará. Algunas palabras son largas y no se pueden envolver. Puede reducir drásticamente el tamaño de la fuente o ir con desbordamiento: desplazamiento.


1

actualice su CSS a lo siguiente: esto debería solucionar

.page {
    width: 280px;
    border:solid 1px blue;
    overflow-x: auto;
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.