html - 使 Bootstrap 表格列适合内容

Question

我正在使用 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 中解决这个问题，但大多数这些方法可能会导致网站的低宽度版本出现问题。

如何使该列下拉到其内容的宽度？

(一如既往 - 现有 Bootstrap 类 > 纯 CSS > Javascript)

Answer 1

制作一个使表格单元格宽度适合内容的类

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