Подгонка столбца таблицы Bootstrap к содержимому

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

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

Это выглядит так:

С некоторым выделением firebug ширина столбца стала такой широкой:

Этот столбец масштабируется вместе со страницей, в то время как страница находится в режимах большей динамической ширины. У меня есть некоторое представление о том, как бы я исправил это в чистом CSS, но большинство из этих подходов, вероятно, вызовут проблемы с версиями сайта с малой шириной.

Как мне сделать так, чтобы этот столбец опустился до ширины его содержимого?

(Как всегда - существующие классы начальной загрузки> чистый CSS> Javascript)

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

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

Проверено на Bootstrap 4.5 и 5.0

Ни одно решение не работает для меня. tdПоследний столбец по- прежнему занимает всю ширину. Итак, вот решение работает.

Добавить table-fitв свой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;
}

Вот тот, который sassпригодится.

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

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

.table-fit {
    width: 1px;
}

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

<table class="table table-fit">

Пример: JSFiddle

Добавить ж-авто родной самозагрузки 4 класса в таблице элементы и ваш стол будет соответствовать его содержанию.

Это решение не всегда годится. Но у меня всего два столбца, и я хочу, чтобы второй столбец занял все оставшееся пространство. Это сработало для меня

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

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

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

<table>
</table>

</div>