我使用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,但大多数这些方法可能会导致问题与低宽度版本的网站。
我怎样才能使该列下拉到其内容的宽度?
- (一如既往-现有的引导类>纯CSS > JavaScript)*
9条答案
按热度按时间k3bvogb11#
创建一个使表格单元格宽度适合内容的类
irtuqstp2#
将w-autonative bootstrap 4class添加到table元素,您的表将适合其内容。
yhuiod9q3#
更新
在Bootstrap 4.5和5.0上测试
没有一个解决方案对我有用。
td
最后一列仍然采用全宽。这就是解决方案。CSS
将
table-fit
添加到table
Scss
下面是
scss
的用法。cclgggtu4#
这是个老问题了,但我来这里就是为了找这个。我希望table尽可能小,以适应它的内容。解决方案是简单地将表宽设置为任意小的数字(例如1px)。我甚至创建了一个CSS类来处理它:
然后这样使用:
示例:JSFiddle
调整CSS的Bootstrap 4示例
camsedfj5#
这个解决方案并不是每次都好。但我只有两列,我想第二列采取所有剩余的空间。这对我很有效
8i9zcol26#
yrdbyhpb7#
你可以像这样把你的表 Package 在div标签周围,因为它也帮助了我。
waxmsbnn8#
没有一个提供的答案对我有用。如果有人遇到这个问题,这里有一个干净的解决方案,也适用于Boostrap 4.6。
通过使用
colgroup
,我们可以调整整个列的宽度。因此,我们将希望适合内容的列的宽度设置为1%。只需确保为列添加适当数量的col
元素:(为表格添加了边框,以便更好地显示结果)
如果你不喜欢内联样式,你可以把它移到一个CSS类中,然后应用到col元素上。
vwoqyblh9#