Створення стовпця таблиці 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

Додайте до елемента таблиці клас w-auto native bootstrap 4, і ваша таблиця відповідатиме його змісту.

Це рішення не завжди добре. Але у мене лише два стовпці, і я хочу, щоб другий стовпець зайняв увесь решту місця. Це спрацювало для мене

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

Ви можете обернути свою таблицю навколо тегу div так, як це допомогло мені також.

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

<table>
</table>

</div>