Bootstrap tablo sütununu içeriğe sığdırmak

Bootstrap kullanıyorum ve bir tablo çiziyorum. En sağdaki sütunun içinde bir düğme var ve bunun, söz konusu düğmeye uyması için gereken minimum boyuta düşmesini istiyorum.

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

Bu şu şekilde işler:

Bazı kundakçı vurgulamalarıyla, sütun genişliği bu kadar geniş çıkmıştır:

Bu sütun, sayfa daha büyük dinamik genişlik modlarında iken, sayfa ile ölçeklenir. Bunu saf CSS'de nasıl düzelteceğim konusunda bir fikrim var, ancak bu yaklaşımların çoğu muhtemelen sitenin düşük genişlikli sürümlerinde sorunlara neden olacaktır.

Bu sütunun içeriğinin genişliğine kadar aşağı düşmesini nasıl sağlayabilirim?

(Her zamanki gibi - Mevcut önyükleme sınıfları> saf CSS> Javascript)

Tablo hücresi genişliğine içeriğe uyacak bir sınıf oluşturun

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

Bootstrap 4.5 ve 5.0'da test edildi

Çözümlerin hiçbiri benim için işe yaramıyor. tdSon sütun hâlâ tam genişliği alır. İşte çözüm işe yarıyor.

Ekle table-fitiçin senintable

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

İşte sasskullanım için olanı .

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

Biraz eski bir soru, ama buraya bunun için geldim. Tablonun içeriğine uygun, olabildiğince küçük olmasını istedim. Çözüm, basitçe tablo genişliğini rastgele küçük bir sayıya (örneğin 1px) ayarlamaktı. Hatta işlemek için bir CSS sınıfı bile oluşturdum:

.table-fit {
    width: 1px;
}

Ve böyle kullanın:

<table class="table table-fit">

Örnek: JSFiddle

Ekle w-auto yerli önyükleme 4 sınıf için masa elemanı ve masa içeriğini uyacaktır.

Bu çözüm her seferinde iyi değil. Ama sadece iki sütunum var ve ikinci sütunun kalan tüm alanı almasını istiyorum. Bu benim için çalıştı

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

Bana da yardımcı olduğu için tablonuzu div etiketinin etrafına bu şekilde sarabilirsiniz.

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

<table>
</table>

</div>