Html 使 Bootstrap 表格列适合内容

Making a Bootstrap table column fit to content

提问by Octopoid

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)

（一如既往 - 现有引导类 > 纯 CSS > Javascript）

回答by tmg

Make a class that will fit table cell width to content

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

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

回答by Dexter

None of the solution works for me. The tdlast column still takes the full width. So here's the solution works. Tested on Bootstrap 4

没有一个解决方案适合我。在td最后一栏仍然需要全宽。所以这里的解决方案有效。在 Bootstrap 4 上测试

Add table-fitto your table

添加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;
}

Here's the one for sassuses.

这是sass用途之一。

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

回答by Pedro Walter

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

回答by Ahmad Habib

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>

回答by antelove

<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>

回答by MERT DO?AN

Add w-autonative bootstrap 4 classto the tableelement and your table will fit its content.

将w-autonative bootstrap 4类添加到table元素，您的 table 将适合其内容。

回答by Sameera K

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>