Anpassen einer Bootstrap-Tabellenspalte an den Inhalt

Ich benutze Bootstrap und zeichne eine Tabelle. In der Spalte ganz rechts befindet sich eine Schaltfläche, und ich möchte, dass sie auf die Mindestgröße herunterfällt, die für die Schaltfläche erforderlich ist.

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

Dies macht wie folgt:

Mit einigen Firebug-Hervorhebungen ist die Spaltenbreite so breit geworden:

Diese Spalte wird mit der Seite skaliert, während sich die Seite in den Modi mit größerer dynamischer Breite befindet. Ich habe eine Idee, wie ich dies in reinem CSS beheben würde, aber die meisten dieser Ansätze werden wahrscheinlich Probleme mit den Versionen der Site mit geringer Breite verursachen.

Wie würde ich diese Spalte auf die Breite ihres Inhalts fallen lassen?

(Wie immer - Bestehende Bootstrap-Klassen> reines CSS> Javascript)

Erstellen Sie eine Klasse, die die Breite der Tabellenzellen an den Inhalt anpasst

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

Keine der Lösungen funktioniert bei mir. Die tdletzte Spalte nimmt noch die volle Breite ein. Hier ist also die Lösung. Getestet auf Bootstrap 4

Fügen Sie table-fitIhrem hinzutable

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

Hier ist die für den sassGebrauch.

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

Eine alte Frage, aber ich bin hier angekommen, um danach zu suchen. Ich wollte, dass der Tisch so klein wie möglich ist und zum Inhalt passt. Die Lösung bestand darin, die Tabellenbreite einfach auf eine beliebige kleine Zahl einzustellen (z. B. 1 Pixel). Ich habe sogar eine CSS-Klasse erstellt, um damit umzugehen:

.table-fit {
    width: 1px;
}

Und benutze es so:

<table class="table table-fit">

Beispiel: JSFiddle

Fügen Sie dem Tabellenelement die Klasse w-auto native bootstrap 4 hinzu , und Ihre Tabelle passt zum Inhalt.

Diese Lösung ist nicht jedes Mal gut. Aber ich habe nur zwei Spalten und ich möchte, dass die zweite Spalte den gesamten verbleibenden Platz einnimmt. Das hat bei mir funktioniert

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

Sie können Ihren Tisch so um das div-Tag wickeln, da es mir auch geholfen hat.

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

<table>
</table>

</div>