我使用Bootstrap,并绘制一张表.最右边的列有一个按钮,我希望它下拉到最小尺寸,它需要适合所述按钮.
<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中解决这个问题,但大多数方法可能会导致网站的低宽度版本的问题.
我将如何将该列下拉到其内容的宽度?
(一如既往 – 现有的引导类>纯CSS> Javascript)
解决方法
创建一个适合表格单元格宽度的类
.table td.fit,.table th.fit { white-space: nowrap; width: 1%; }