css - 表列大小

Question

在 Bootstrap 3 中，我可以将 col-sm-xx 应用于 thead 中的 th 标签并随意调整表格列的大小。然而，这在 bootstrap 4 中不起作用。我怎样才能在 bootstrap 4 中实现这样的目标？

<thead>
<th class="col-sm-3">3 columns wide</th>
<th class="col-sm-5">5 columns wide</th>
<th class="col-sm-4">4 columns wide</th>
</thead>

查看 codeply，前提是它的大小不正确，尤其是当您向表中添加一些数据时。看看它是如何运行的:

<div class="container" style="border: 1px solid black;">
    <table class="table table-bordered">
    <thead>
        <tr class="row">
            <th class="col-sm-3">3 columns wide</th>
            <th class="col-sm-5">5 columns wide</th>
            <th class="col-sm-4">4 columns wide</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>123</td>
            <td>456</td>
            <td>789</td>
        </tr>
    </tbody>
</table>
</div>

Answer 1

2018 年更新

确保您的表包含 table 类。这是因为 Bootstrap 4 tables are "opt-in"所以 table 类必须有意添加到表中。

http://codeply.com/go/zJLXypKZxL

Bootstrap 3.x 也有一些 CSS 来重置表格单元格，这样它们就不会 float 。

table td[class*=col-], table th[class*=col-] {
    position: static;
    display: table-cell;
    float: none;
}

我不知道为什么这不是 Bootstrap 4 alpha，但它可能会在最终版本中添加回来。添加此 CSS 将帮助所有列使用 thead..

中设置的宽度

Bootstrap 4 Alpha 2 Demo

---

更新(从 Bootstrap 4.0.0 开始)

现在 Bootstrap 4 是 flexbox，表格单元格在添加 col-* 时不会采用正确的宽度。解决方法是在表格单元格上使用 d-inline-block 类来防止列的默认显示: flex 。

BS4 中的另一个选项是使用宽度调整实用程序类...

<thead>
     <tr>
           <th class="w-25">25</th>
           <th class="w-50">50</th>
           <th class="w-25">25</th>
     </tr>
</thead>

Bootstrap 4 Alpha 6 Demo

最后，您可以在表格行 (tr) 上使用 d-flex，在列 (th,td) 上使用 col-* 网格类。 .

<table class="table table-bordered">
        <thead>
            <tr class="d-flex">
                <th class="col-3">25%</th>
                <th class="col-3">25%</th>
                <th class="col-6">50%</th>
            </tr>
        </thead>
        <tbody>
            <tr class="d-flex">
                <td class="col-sm-3">..</td>
                <td class="col-sm-3">..</td>
                <td class="col-sm-6">..</td>
            </tr>
        </tbody>
    </table>

Bootstrap 4.0.0 (stable) Demo

注意:将 TR 更改为显示:flex can alter the borders