Создание столбца таблицы Bootstrap, подходящего для контента

Я использую Bootstrap и рисую таблицу. В самом правом столбце есть кнопка, и я хочу, чтобы он упал до минимального размера, необходимого для установки указанной кнопки.

<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;" 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>

Ответы

Ответ 1

Создайте класс, который будет соответствовать ширине ячейки таблицы для содержимого

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

Ответ 2

Вид старого вопроса, но я приехал сюда, ища это. Я хотел, чтобы стол был как можно меньше, приспосабливаясь к нему. Решением было просто установить ширину таблицы на произвольное небольшое число (например, 1px). Я даже создал класс CSS для его обработки:

.table-fit {
    width: 1px;
}

И используйте его так:

<table class="table table-fit">

Пример: JSFiddle

Ответ 3

Вы можете обернуть таблицу вокруг тега div так, как это мне помогло.

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

<table>
</table>

</div>