I'm using Bootstrap, and drawing a table. The rightmost column has a button in it, and I want it to drop down to the minimum size it needs to fit said button.
我正在使用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>This renders like this:
这呈现如下：
With some firebug highlighting, the column width has come out this wide:
随着一些萤火虫突出显示，列宽已经出现了这么宽：
That column scales with the page, while the page is in the larger dynamic width modes. I have some idea how I'd go about fixing this in pure CSS, but most of those approaches will probably cause issues with the low width versions of the site.
该列与页面缩放，而页面处于较大的动态宽度模式。我知道如何在纯CSS中修复它，但大多数这些方法可能会导致网站的低宽度版本出现问题。
How would I make that column drop down to the width of it's contents?
如何将该列下拉到其内容的宽度？
(As ever - Existing bootstrap classes > pure CSS > Javascript)
（一如既往 - 现有的bootstrap类>纯CSS> Javascript）
3 个解决方案
#1
87
Make a class that will fit table cell width to content
创建一个适合表格单元格宽度的类到内容
.table td.fit,
.table th.fit {
white-space: nowrap;
width: 1%;
}
#2
5
Kind of an old question, but I arrived here looking for this. I wanted the table to be as small as possible, fitting to it's contents. The solution was to simply set the table width to an arbitrary small number (1px for example). I even created a CSS class to handle it:
这是一个古老的问题，但我来到这里寻找这个。我希望桌子尽可能小，适合它的内容。解决方案是简单地将表格宽度设置为任意小的数字（例如1px）。我甚至创建了一个CSS类来处理它：
.table-fit {
width: 1px;
}
And use it like so:
并像这样使用它：
<table class="table table-fit">
Example: JSFiddle
示例：JSFiddle
#3
2
You can wrap your table around the div tag like this as it helped me too.
您可以像这样包围div标签，因为它也帮助了我。
<div class="col-md-3">
<table>
</table>
</div>
#1
87
Make a class that will fit table cell width to content
创建一个适合表格单元格宽度的类到内容
.table td.fit,
.table th.fit {
white-space: nowrap;
width: 1%;
}
#2
5
Kind of an old question, but I arrived here looking for this. I wanted the table to be as small as possible, fitting to it's contents. The solution was to simply set the table width to an arbitrary small number (1px for example). I even created a CSS class to handle it:
这是一个古老的问题，但我来到这里寻找这个。我希望桌子尽可能小，适合它的内容。解决方案是简单地将表格宽度设置为任意小的数字（例如1px）。我甚至创建了一个CSS类来处理它：
.table-fit {
width: 1px;
}
And use it like so:
并像这样使用它：
<table class="table table-fit">
Example: JSFiddle
示例：JSFiddle
#3
2
You can wrap your table around the div tag like this as it helped me too.
您可以像这样包围div标签，因为它也帮助了我。
<div class="col-md-3">
<table>
</table>
</div>