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

这呈现如下：

通过一些萤火虫突出显示，列宽变得如此宽：

该列随页面缩放，而页面处于较大的动态宽度模式。我知道如何在纯 CSS 中解决这个问题，但大多数方法可能会导致网站的低宽度版本出现问题。

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

（一如既往 - 现有的引导类 > 纯 CSS > Javascript）

原文由 Octopoid 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

创建一个使表格单元格宽度适合内容的类

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

原文由 tmg 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在 Bootstrap 4.5 和 5.0 上测试

没有一种解决方案适合我。 td 最后一列仍然占据全宽。所以这里的解决方案有效。

CSS

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

SCSS

这是 scss 使用的那个。

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

原文由 Dexter 发布，翻译遵循 CC BY-SA 4.0 许可协议