¿Cómo puedo hacer que una tabla CSS se ajuste al ancho de la pantalla?

Question

Actualmente, la tabla es demasiado ancha y hace que el navegador agregue una barra de desplazamiento horizontal.

Answer 1

Si el contenido de la tabla es demasiado ancho (como en this example), no hay nada que pueda hacer otra cosa que alterar el contenido para que sea posible que el navegador para mostrarla en un formato más estrecho. Contrariamente a las respuestas anteriores, establecer el ancho al 100% no tendrá ningún efecto si el contenido es demasiado ancho (como demuestran ese enlace, y this one). Los navegadores ya intentan mantener las tablas dentro de los márgenes izquierdo y derecho si pueden, y solo recurren a una barra de desplazamiento horizontal si no pueden.

Algunas maneras en que puede alterar el contenido para hacer una tabla más estrecha:

• reducir el número de columnas (tal vez romper una tabla megalítica en varias tablas independientes).
• Si está usando CSS white-space: nowrap en cualquiera de los contenidos (o el antiguo nowrap atributo,  , un elemento nobr, etc.), ver si se puede vivir sin ellos por lo que el navegador tiene la opción de envolver a ese contenido mantener el ancho hacia abajo.
• Si está utilizando márgenes realmente amplios, relleno, bordes, etc., intente reducir su tamaño (pero estoy seguro de que pensó en eso).

Si la tabla es demasiado ancha pero no ve una buena razón para ello (el contenido no es tan amplio, etc.), tendrá que proporcionar más información acerca de cómo está diseñando la tabla, los elementos circundantes, etc. Nuevamente, de forma predeterminada, el navegador evitará la barra de desplazamiento si puede.

Answer 2

¿Qué tal:

table { 
    width: 100%; 
} 

Tal vez usted tiene algunas imágenes que son demasiado grandes y que hace que la tabla sea más amplia.

Además, compruebe cómo se ve su mesa en otros navegadores.

Answer 3

table { width: 100%; } 

No se obtendrá el resultado exacto que está esperando, debido a todos los márgenes y rellenos utilizados en el cuerpo. Entonces SI los scripts están BIEN, entonces usa Jquery.

$("#tableid").width($(window).width()); 

Si no es así, utilice este fragmento

<style> 
    body { margin:0;padding:0; } 
</style> 
<table width="100%" border="1"> 
    <tr> 
     <td>Just a Test 
     </td> 
    </tr> 
</table> 

Usted se dará cuenta de que la anchura está cubriendo perfectamente la página.

Lo principal es anular demasiado el margin y padding como lo he mostrado en el cuerpo, entonces está configurado.

Answer 4

CSS:

table { 
    table-layout:fixed; 
} 

actualización con CSS a partir de los comentarios:

td { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    word-wrap: break-word; 
} 

Para teléfonos móviles les dejo el ancho de la tabla, pero asignar una clase CSS adicional a la tabla para permitir el desplazamiento horizontal (tabla ya no pasará por la pantalla del móvil):

@media only screen and (max-width: 480px) { 
    /* horizontal scrollbar for tables if mobile screen */ 
    .tablemobile { 
     overflow-x: auto; 
     display: block; 
    } 
} 

Suficiente sufciente.

Answer 5

Ya hay una buena solución para esta pregunta. Pero todos se olvidaron del tamaño de la fuente. Esta es la última pero no la menor solución. puedes disminuir el tamaño de tu fuente en 2 o 3 px. seguirá siendo visible para el usuario y puede disminuir el ancho de la mesa. esto funcionó para mí. como mi tabla tiene 5 columnas 4 que muestran perfectamente 5º salió de la ventana gráfica. de modo I disminuyó de tamaño de fuente y los 5 columnas se encajan en la pantalla

table th td 
{ 
font-size:14px; 
} 

FYI, si sus tablas tiene demasiadas columnas pero no se puede disminuir a continuación, hacer que el tamaño de fuente pequeña es mejor que la de desplazamiento horizontal. hay dos ventajas su estilo para la web móvil seguirá siendo el mismo (bueno sin desplazamiento horizontal) y cuando el usuario vea tamaño pequeño, la mayoría de los usuarios acercarán la mesa a su nivel de comodidad.

Answer 6

Establecer font-size en unidades de visualización de la anchura relacionada, por ejemplo .:

table { font-size: 0.9vw; }

Esto hará que la fuente ilegible cuando la página es demasiado estrecha, pero a veces esto es aceptable.

Answer 7

Poner la tabla en un elemento contenedor que tiene

overflow: scroll; max-width: 95vw;

o ajuste la tabla a la pantalla y desborde: desplaza todas las celdas de la tabla.