Html 使引导表列适合内容

我正在使用引导，并绘制一张表格。最右边的列中有一个按钮，我希望它能降到适合该按钮所需的最小大小

名称
付款方式
巴特福
签证

创建一个将表格单元格宽度与内容相匹配的类

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

---

这是个老问题，但我来这里就是为了这个。我希望桌子尽可能小，适合里面的东西。解决方案是简单地将表格宽度设置为任意小的数字（例如1px）。我甚至创建了一个CSS类来处理它：

.table-fit {
    width: 1px;
}

并像这样使用它：

<table class="table table-fit">

---

示例：

您可以像这样将您的表环绕在div标记周围，因为它也帮助了我

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

<table>
</table>

</div>

在Bootstrap 4.5和5.0上测试 没有一个解决方案对我有效。

td

最后一列仍然采用全宽。所以这里的解决方案是有效的

将

表格拟合

添加到您的

表格

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的

sass

uses

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

左边
行动
名称
付款方式
巴特福
签证
赖特
名称
付款方式
行动
巴特福
签证

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

---

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

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

A.
B

名称
付款方式
巴特福
签证

提供的答案中没有一个适合我。如果有人偶然发现这个问题，这里有一个干净的解决方案，它也适用于Boostrap 4.6

通过使用

colgroup

，我们可以调整整个列的宽度。因此，我们将要适合内容的列的宽度设置为1%。只需确保为列添加适当数量的

col

元素即可：

名称
付款方式
巴特福
签证

发布这篇文章后，我有一个想法——如果我恰好对齐了该列，我想也差不多——如果其他列中有足够的数据需要空间，它们无论如何都会将其收回。编辑：Doh-当我有多个列需要下拉到最小大小时，这不起作用。对于布局来说是这样，但对于表格数据来说，表格是绝对合适的。你应该使用div而不是表格。然后，您可以为其宽度分配百分比值以匹配页面宽度。表不应用于结构。您可以使用表来处理通常放入表中的数据。Octopoid没有将表标记用于结构，而是用于显示数据。这是table标签的正确用法。Gah-我把它放在

td

规则中，然后将它应用到

th

-非常有效，谢谢。）（希望你不介意，我也在你的答案中加入了第条规则）问题只涉及表格的某些列，而不是表格的所有列是的，但需要找到解决问题的方法，我来到了这里。我在回答中解释了这一点。这仍然是对这个问题的不恰当和不正确的回答。这是唯一适用于bs4的解决方案。非常感谢！这也适用于Bootstrap 3。这一个在Firefox中对我有效，它是一个实际的Bootstrap解决方案。嘿，欢迎来到这里！在留下答案时，请确保不要只留下一段代码。同样重要的是解释代码的作用，澄清问题。如果您将我的代码与提供的代码进行比较，您将看到差异。我的回答并不孤独，没有解释。所以不要忽视它。

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