使Bootstrap表列适合内容 [英] Making a Bootstrap table column fit to content

问题描述

我正在使用Bootstrap并绘制表格。最右边的列中有一个按钮，我希望它降低到适合该按钮所需的最小大小。

I'm using Bootstrap, and drawing a table. The rightmost column has a button in it, and I want it to drop down to the minimum size it needs to fit said button.

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

结果如下：

突出显示了一些萤火虫，列的宽度已经这么宽了：

With some firebug highlighting, the column width has come out this wide:

当页面处于较大的动态宽度模式时，该列随页面缩放。我已经知道如何在纯CSS中修复此问题，但是大多数方法可能会导致网站的低宽度版本出现问题。

That column scales with the page, while the page is in the larger dynamic width modes. I have some idea how I'd go about fixing this in pure CSS, but most of those approaches will probably cause issues with the low width versions of the site.

如何

（像往常一样-现有的引导程序类>纯CSS> Javascript）

推荐答案

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

Make a class that will fit table cell width to content

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

这篇关于使Bootstrap表列适合内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！