¿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

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

31

<table style="width: auto;" ...funciona bien. Probado en Chrome 38, IE 11 y Firefox 34.

jsfiddle: http://jsfiddle.net/rpaul/taqodr8o/

— Razan Paul
fuente

15

Si estás usando Bootstrap 4, úsalo .w-auto.

Ver https://getbootstrap.com/docs/4.1/utilities/sizing/

— Danko Durbić
fuente

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