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

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í:

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

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)

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

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

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

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

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>

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>