Dopasowywanie kolumny tabeli Bootstrap do zawartości

Używam Bootstrap i rysuję tabelę. Kolumna znajdująca się najbardziej po prawej stronie ma przycisk i chcę, aby opadał do minimalnego rozmiaru potrzebnego do dopasowania do tego przycisku.

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

To renderuje się tak:

Po podświetleniu firebug szerokość kolumny wyszła tak szeroka:

Ta kolumna skaluje się wraz ze stroną, podczas gdy strona znajduje się w większych dynamicznych trybach szerokości. Mam pewne wyobrażenie, jak bym to naprawić w czystym CSS, ale większość z tych podejść prawdopodobnie spowoduje problemy z wersjami witryny o małej szerokości.

Jak sprawić, by ta kolumna była rozwijana do szerokości jej zawartości?

(Jak zawsze - istniejące klasy bootstrap> czysty CSS> JavaScript)

Utwórz klasę, która będzie dopasowywać szerokość komórek tabeli do zawartości

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

Testowane na Bootstrap 4.5 i 5.0

Żadne z rozwiązań nie działa dla mnie. PliktdOstatnia kolumna nadal zajmuje całą szerokość. Oto rozwiązanie działa.

Dodaj table-fitdo swojegotable

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

Oto jeden do sasszastosowań.

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

Trochę starego pytania, ale przyjechałem tutaj, szukając tego. Chciałem, żeby stół był jak najmniejszy i pasował do zawartości. Rozwiązaniem było po prostu ustawienie szerokości tabeli na dowolnie małą liczbę (na przykład 1 piksel). Stworzyłem nawet klasę CSS do obsługi tego:

.table-fit {
    width: 1px;
}

I używaj go w ten sposób:

<table class="table table-fit">

Przykład: JSFiddle

Dodaj klasę natywną w-auto bootstrap 4 do elementu tabeli , a Twoja tabela dopasuje się do jej zawartości.

To rozwiązanie nie zawsze jest dobre. Ale mam tylko dwie kolumny i chcę, aby druga kolumna zajęła całe pozostałe miejsce. To zadziałało dla mnie

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

W ten sposób możesz owinąć tabelę wokół znacznika DIV, ponieważ mi to też pomogło.

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

<table>
</table>

</div>