使 Bootstrap 表列适合于内容

我在用 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>

这是这样渲染的:

Table Example

通过一些 Firebug 的突出显示，列的宽度变得如此之宽:

Column Width

该列随页面伸缩，而页面处于较大的动态宽度模式。我有一些想法，我将如何去修复这个纯 CSS，但大多数这些方法可能会导致问题的低宽度版本的网站。

我如何使该列下降到其内容的宽度？

(正如现有的引导类 > 纯 CSS > Javascript)

199294 次浏览
小开
最佳答案

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

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

这是个老问题了，但我来这儿就是为了找这个。我希望桌子尽可能的小，以适应它的内容。解决方案是简单地将表宽度设置为一个任意的小数字(例如1px)。我甚至创建了一个 CSS 类来处理它:

.table-fit {
width: 1px;
}

像这样使用它:

<table class="table table-fit">

例子: JSFiddle

引导程序4的例子与调整 CSS

.table-fit {
width: 1px!important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>


<h3>Regular Table</h3>


<table class="table table-bordered">
<tr>
<td>Key</td>
<td>Value</td>
</tr>
<tr>
<td>Key</td>
<td>Value</td>
</tr>
</table>


<h3>Compact Table</h3>


<table class="table table-bordered table-fit">
<tr>
<td>Key</td>
<td>Value</td>
</tr>
<tr>
<td>Key</td>
<td>Value</td>
</tr>
</table>

小开

你可以像这样把桌子围在 div 标签周围，因为它也帮助了我。

<div class="col-md-3">


<table>
</table>


</div>
小开

Tested on Bootstrap 4.5 and 5.0

没有一个办法对我有用。td最后一列仍然采用全宽。这就是解决方案。

CSS

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

抱歉

这是 scss用的。

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<h5>Left</h5>
<table class="table table-responsive">
<tbody>
<tr>
<th>Action</th>
<th>Name</th>
<th>Payment Method</th>
</tr>
<tr>
<td  style="width:1px; white-space:nowrap;">
<a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a>
<a role="button" class="btn btn-primary btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Edit</a>
<a role="button" class="btn btn-danger btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Delete</a>
</td>
<td>Bart Foo</td>
<td>Visa</td>
</tr>
</tbody>
</table>


<h5>Right</h5>


<table class="table table-responsive">
<tbody>
<tr>
<th>Name</th>
<th>Payment Method</th>
<th>Action</th>
</tr>
<tr>


<td>Bart Foo</td>
<td>Visa</td>
<td  style="width:1px; white-space:nowrap;">
<a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a>
<a role="button" class="btn btn-primary btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Edit</a>
<a role="button" class="btn btn-danger btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Delete</a>
</td>
</tr>
</tbody>
</table>

小开

将 W-auto本机引导程序4 同学们添加到 桌子元素，您的表将适合其内容。

enter image description here

小开

This solution is not good every time. But i have only two columns and I want second column to take all the remaining space. This worked for me

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="table-responsive">
<table class="table">
<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>
</div>

小开

None of the provided answers worked for me. If anyone stumbles upon this problem, here's a clean solution which also works with Boostrap 4.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>

(added a border to the table to better visualize the result)

如果您不喜欢内联样式，可以将其移动到 CSS 类中，并将其应用到 colelement。


提交答案