¿Por qué las tablas de Twitter Bootstrap siempre tienen un 100% de ancho?

148

Supongamos este marcado:

<table class="table table-bordered" align="center">

No importa cuántas celdas tengo, la tabla siempre tiene un ancho del 100%. ¿Porque eso?

twitter-bootstrap línea skowron
fuente
3
porque usa eficientemente el ancho de sus padres; ¡así es como debería funcionar el sistema de cuadrícula!
Vishal
¿Qué ancho quieres que tenga tu mesa?
Andres Ilich
1
Me gustaría que dependiera del número de celdas, al igual que la tabla ordinaria
skowron-line
1
Para aquellos que buscan cómo configurar el ancho de celda como ancho de
división a

Respuestas:

228

Todas las mesas dentro del bootstrap se estiran de acuerdo con su contenedor, lo que puede hacer fácilmente colocando su mesa dentro de un .span*elemento de cuadrícula de su elección. Si desea eliminar esta propiedad, puede crear su propia clase de tabla y simplemente agregarla a la tabla que desea expandir con el contenido dentro de:

.table-nonfluid {
   width: auto !important;
}

Puede agregar esta clase dentro de su propia hoja de estilo y simplemente agregarla al contenedor de su tabla de la siguiente manera:

<table class="table table-nonfluid"> ... </table>

De esta forma, su cambio no afectará a la hoja de estilo de arranque en sí (es posible que desee tener una tabla fluida en otro lugar de su documento).

Andres Ilich
fuente
1
Si coloca la tabla dentro de una etiqueta span *, para centrar la tabla, ¿también incluiría un desplazamiento * también?
HPWD
@dlackey Sí, puede compensar la tabla con una clase para centrarla, incluso puede agregar una .span*clase a su tabla para darle algo de ancho.
Andres Ilich
2
Por lo menos con 3 de arranque que sólo funcionaba para mí después de añadir !importanta lawidth: auto
geekQ
tenemos que usar la clase span de bootstarp para una tabla, o tenemos que dar manualmente un estilo para la clase .span,
Jot Dhaliwal
1
Advertencia. Tenga cuidado si se usa en combinación con .table-responsive y .table-border. El borde se aplica al contenedor .table-responsive cuando está debajo del ancho de la pantalla 767px. (bootstrap 3.x)
Stuart
13

Respuesta 1:

¿Por qué luchar contra eso? ¿Por qué no simplemente controlar el ancho de su mesa usando la cuadrícula bootstrap? Este es el marcado Bootstrap 3.

<div class="row">
    <div class="col-sm-6">
        <table></table>
    </div>
</div>

Esto creará una tabla que es la mitad (6 de 12) del ancho del elemento contenedor.

A veces uso estilos en línea según las otras respuestas, pero se desaconseja.

Respuesta # 2:

Si está utilizando Bootstrap 4, tiene algunas clases de ayuda agradables para ancho como:

w-25, w-50, w-75, and w-100

Aquí está el documento: https://getbootstrap.com/docs/4.0/utilities/sizing/

Encadenar
fuente
2
Esta es, con mucho, la solución más simple y debería ser la respuesta aceptada
Jeff Brown
12

Estaba teniendo el mismo problema, arreglé la tabla y luego especifiqué mi ancho td. Si tienes esto, puedes hacerlo también.

<style>
table {
table-layout: fixed;
word-wrap: break-word;
}
</style>

<td width="10%" /td>

No tuve suerte con .table-nonfluid.

DDDD
fuente
1
Pruebawidth: auto !important;
Leo
Puedes evitarlo !important(es una mala práctica ). Ver comentario sobre una respuesta a continuación .
Ollie Bennett
3

¡He intentado agregar style="width: auto !important"y funciona muy bien para mí!

Sergey Dolgopolov
fuente
1
Si se asegura de que su CSS personalizado aparece después del CSS de Bootstrap (por ejemplo, su <link>etiqueta de estilos personalizados aparece debajo de la <link>etiqueta de Bootstrap ), entonces las reglas caerán en cascada según lo diseñado, y no debería necesitar usar su !importantexcepción en absoluto. Esto es cierto porque width: 100%;se define tableen Bootstrap CSS y, por lo tanto, reemplaza su width: auto;regla.
Ollie Bennett
No es realmente una respuesta, es mejor editar la respuesta actual aceptada que la mayoría de la gente lee (la edité ahora) .
Iulian Onofrei