tablas form color bootstrap twitter-bootstrap

twitter-bootstrap - form - label bootstrap 4



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

Respuesta 1:

¿Por qué pelear? ¿Por qué no simplemente controlar el ancho de la mesa con la cuadrícula de arranque? Este es el marcado de 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 que lo contiene.

A veces uso estilos en línea según las otras respuestas, pero no me gusta.

Respuesta # 2:

Si está utilizando bootstrap 4, tiene algunas buenas clases de ayuda para anchos como:

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

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

Supongamos que esta marca:

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

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

Estaba teniendo el mismo problema, hice la tabla fija y luego especifiqué el ancho de mi td. Si lo tienes, puedes hacer eso también.

<style> table { table-layout: fixed; word-wrap: break-word; } </style> <td width="10%" /td>

No tuve suerte con .table-nonfluid.

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

Todas las tablas dentro del bootstrap se estiran de acuerdo con su contenedor, lo que puede hacer fácilmente colocando su tabla dentro de un elemento de cuadrícula .span* 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 manera, su cambio no afectará a la hoja de estilo de arranque en sí misma (es posible que desee tener una tabla fluida en otro lugar en su documento).