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

Answer 2

将w-auto native bootstrap 4类添加到table元素，您的 table 将适合其内容。

Answer 3

这个解决方案都不适合我.在td最后一栏仍然需要全宽.所以这是解决方案的工作原理.在Bootstrap上测试4

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

这是一个sass用途.

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

Answer 4

有点老问题,但我来到这里寻找这个.我希望桌子尽可能小,适合它的内容.解决方案是简单地将表格宽度设置为任意小的数字(例如1px).我甚至创建了一个CSS类来处理它:

.table-fit {
    width: 1px;
}

并像这样使用它:

<table class="table table-fit">

示例:JSFiddle

Answer 5

这种解决方案并不是每次都很好。但我只有两列，我希望第二列占据所有剩余空间。这对我有用

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