使引导表列与内容相匹配
使引导表列与内容相匹配
提问于 2015-07-02 11:55:46
我用的是鞋带，画一张桌子。最右边的列中有一个按钮，我希望它降到它需要的最小大小，以适应上述按钮。
<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)
Stack Overflow用户
发布于 2021-04-28 09:06:43
所提供的答案对我都没有用。如果有人偶然发现这个问题，这里有一个干净的解决方案，它也适用于Boostra4.6。
通过使用colgroup，我们可以调整整个列的宽度。因此，对于我们想要适应内容的列，我们将宽度设置为1%。只需确保为您的列添加适当数量的col元素：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="table-responsive">
<table class="table table-bordered">
<colgroup>
<col>
<col>
<col style="width: 1%;">
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Payment Method</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Bart Foo</td>
<td>Visa</td>
<td><a role="button" class="btn btn-primary btn-xs" href="">View</a></td>
</tr>
</tbody>
</table>
</div>
</div>
(在表中添加边框以更好地可视化结果)
如果您不喜欢内联样式，可以始终将其移动到CSS类中，并将其应用于col元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31184000
复制相关文章
相似问题
腾讯云开发者
