Este dilema se puede tratar de diferentes maneras, pero te mostramos la solución más completa para nosotros.
Solución:
Cree una clase que se ajuste al ancho de la celda de la tabla al contenido
.table td.fit,
.table th.fit
white-space: nowrap;
width: 1%;
Probado en Bootstrap 4.5 y 5.0
Ninguna de las soluciones me funciona. los td la última columna todavía ocupa todo el ancho. Así que aquí está la solución funciona.
Agregar table-fit para usted table
table.table-fit
width: auto !important;
table-layout: auto !important;
table.table-fit thead th, table.table-fit tfoot th
width: auto !important;
table.table-fit tbody td, table.table-fit tfoot td
width: auto !important;
Aquí está el uno para sass usos.
@mixin width
width: auto !important;
table
&.table-fit
@include width;
table-layout: auto !important;
thead th, tfoot th
@include width;
tbody td, tfoot td
@include width;
Una especie de vieja pregunta, pero llegué aquí buscando esto. Quería que la mesa fuera lo más pequeña posible, que se ajustara a su contenido. La solución fue simplemente establecer el ancho de la tabla en un número pequeño arbitrario (1px, por ejemplo). Incluso creé una clase CSS para manejarlo:
.table-fit
width: 1px;
Y úsalo así:
Ejemplo: JSFiddle
Si aceptas, eres capaz de dejar un post acerca de qué le añadirías a este artículo.
¡Haz clic para puntuar esta entrada!(Votos: 0 Promedio: 0)
Utiliza Nuestro Buscador