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

Ya no tienes que buscar más por todo internet porque llegaste al sitio exacto, contamos con la respuesta que quieres encontrar sin problemas.

Solución:

CSS:

table  
    table-layout:fixed;

Actualizar con CSS de los comentarios:

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

Para teléfonos móviles, dejo el ancho de la tabla pero asigno una clase CSS adicional a la tabla para permitir el desplazamiento horizontal (la tabla ya no pasará por encima de 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;
    

Más que suficiente.

si la mesa contenido es demasiado ancho (como en este ejemplo), no hay nada que pueda hacer más que modificar el contenido para que el navegador pueda mostrarlo en un formato más estrecho. Al contrario de las respuestas anteriores, establecer el ancho en 100% no tendrá ningún efecto si el contenido es demasiado ancho (como demuestran ese enlace y este). 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 formas de modificar el contenido para hacer una tabla más estrecha:

• Reduzca el número de columnas (quizás dividiendo una tabla megalítica en varias tablas independientes).
• Si estás usando CSS white-space: nowrap en cualquiera de los contenidos (o el viejo nowrap attribute,  a nobr elemento, etc.), vea si puede vivir sin ellos para que el navegador tenga la opción de envolver ese contenido para mantener el ancho bajo.
• Si está utilizando márgenes, relleno, bordes, etc. realmente amplios, 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 ancho, etc.), deberá proporcionar más información sobre cómo está diseñando la tabla, los elementos que la rodean , etc. Una vez más, de forma predeterminada, el navegador evitará la barra de desplazamiento si puede.

table  width: 100%; 

No producirá el resultado exacto que espera, debido a todos los márgenes y rellenos utilizados en el cuerpo. Entonces, SI los scripts están bien, entonces use Jquery.

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

Si no, usa este fragmento

    

        
Just a Test
        
    

Notarás que el ancho cubre perfectamente la página.

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

Recuerda que puedes difundir esta división si te fue de ayuda.

---

---

Utiliza Nuestro Buscador