使Bootstrap表列适合内容

Question 1

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

展开摘要

呈现如下：

在突出显示萤火虫的同时，列的宽度也是如此宽：

当页面处于较大的动态宽度模式时，该列随页面缩放。我知道如何在纯CSS中修复此问题，但是大多数方法可能会导致网站的低宽度版本出现问题。

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

（与以往一样-现有的引导程序类>纯CSS> Javascript）

Question 2

制作一个适合表格单元格宽度以适合内容的类

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

Question 3

没有一种解决方案适合我。在td最后一栏仍然需要全宽。所以这是解决方案的工作原理。在Bootstrap 4上测试

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

这是一种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;
        }
    }
}

Question 4

有点老问题了，但是我到这里来寻找这个问题。我希望桌子尽可能小，以适合其内容。解决方案是将表格宽度简单地设置为任意小的数字（例如1px）。我什至创建了一个CSS类来处理它：

.table-fit {
    width: 1px;
}

并像这样使用它：

<table class="table table-fit">

示例：JSFiddle

Question 5

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

Question 6

这种解决方案每次都不好。但是我只有两列，我希望第二列占用所有剩余空间。这对我有用

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

Question 7

您可以像这样对div标签包裹表格，因为它也对我有帮助。

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

<table>
</table>

</div>

Question 8

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

展开摘要