Hacer que una columna de la tabla Bootstrap se ajuste al contenido


82

Estoy usando Bootstrap y dibujando una tabla. La columna de la derecha tiene un botón, y quiero que se reduzca al tamaño mínimo que necesita para adaptarse a dicho botón.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<table class="table table-responsive">
        <tbody>
            <tr>
                <th>Name</th>
                <th>Payment Method</th>
                <th></th>
            </tr>
            <tr>
                <td>Bart Foo</td>
                <td>Visa</td>
                <td><a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a></td>
            </tr>
        </tbody>
    </table>

Esto se renderiza así:

Ejemplo de tabla

Con un poco de resaltado de firebug, el ancho de la columna ha resultado así de ancho:

Ancho de columna

Esa columna se escala con la página, mientras que la página está en los modos de ancho dinámico más grande. Tengo una idea de cómo solucionaría esto en CSS puro, pero la mayoría de esos enfoques probablemente causarán problemas con las versiones de ancho bajo del sitio.

¿Cómo haría que esa columna caiga al ancho de su contenido?

(Como siempre: clases de arranque existentes> CSS puro> Javascript)


Después de haber publicado esto, acabo de pensar: si alineo correctamente esa columna, supongo que es lo mismo, si las otras columnas tienen suficientes datos para necesitar el espacio, lo recuperarán de todos modos. EDITAR: Doh: esto no funciona cuando tengo más de una columna que necesito para bajar a un tamaño mínimo.
Octopoid

6
Eso es cierto para el diseño, pero las tablas están absolutamente bien para los datos tabulares.
Octopoid

2
Deberías usar divs en lugar de tablas. Luego, podría asignar valores porcentuales para que sus anchos coincidan con el ancho de la página.
sqe

6
Las tablas no deben usarse para estructurar . Puede utilizar tablas para los datos que normalmente se incluyen en tablas. Octopoid no usa la etiqueta de tabla para estructura, se usa para mostrar datos. Es un uso correcto de la etiqueta de tabla.
gewh

Respuestas:


154

Cree una clase que se ajuste al contenido del ancho de celda de la tabla

.table td.fit, 
.table th.fit {
    white-space: nowrap;
    width: 1%;
}

7
Gah, pondría esto en una tdregla y luego lo aplicaría a un th... eso funciona perfectamente, gracias. :) (Espero que no le importe, también agregué la regla th a su respuesta)
Octopoid

20

Ninguna solución me funciona. La tdúltima columna todavía tiene el ancho completo. Así que aquí está la solución. Probado en Bootstrap 4

Agregar table-fita sutable

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 de sassusos.

@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;
        }
    }
}

esta es la única solución que funciona con bs4. ¡Gracias una tonelada!
TheWiz

10

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 (1 px por ejemplo). Incluso creé una clase CSS para manejarlo:

.table-fit {
    width: 1px;
}

Y úsalo así:

<table class="table table-fit">

Ejemplo: JSFiddle


2
La pregunta se refiere solo a algunas columnas de una tabla, no a todas las columnas de la tabla
GabiM

2
Sí, pero necesitaba encontrar una solución a mi problema, llegué aquí. Expliqué esto en mi respuesta.
Pedro Walter

2
Sigue siendo una respuesta incorrecta e inapropiada a esta pregunta.
Maritim

5

Agregue la clase w-auto native bootstrap 4 al elemento de la tabla y su tabla se ajustará a su contenido.

ingrese la descripción de la imagen aquí


1
Este funcionó para mí en Firefox, y es una solución real de Boostrap.
paperduck

3

Esta solución no siempre es buena. Pero solo tengo dos columnas y quiero que la segunda columna ocupe todo el espacio restante. Esto funcionó para mi

 <tr>
    <td class="text-nowrap">A</td>
    <td class="w-100">B</td>
 </tr>

1

Puede envolver su tabla alrededor de la etiqueta div de esta manera, ya que también me ayudó.

<div class="col-md-3">

<table>
</table>

</div>

0

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<h5>Left</h5>
<table class="table table-responsive">
    <tbody>
        <tr>
            <th>Action</th>        
            <th>Name</th>
            <th>Payment Method</th>
        </tr>
        <tr>
            <td  style="width:1px; white-space:nowrap;">
                <a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a>
                <a role="button" class="btn btn-primary btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Edit</a>
                <a role="button" class="btn btn-danger btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Delete</a>                
            </td>        
            <td>Bart Foo</td>
            <td>Visa</td>
        </tr>
    </tbody>
</table>

<h5>Right</h5>

<table class="table table-responsive">
    <tbody>
        <tr>                    
            <th>Name</th>
            <th>Payment Method</th>
            <th>Action</th>            
        </tr>
        <tr>

            <td>Bart Foo</td>
            <td>Visa</td>
            <td  style="width:1px; white-space:nowrap;">
                <a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a>
                <a role="button" class="btn btn-primary btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Edit</a>
                <a role="button" class="btn btn-danger btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Delete</a>                
            </td>            
        </tr>
    </tbody>
</table>

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.