表列大小 [英] Table column sizing

问题描述

在Bootstrap 3中，我可以将col-sm-xx应用于thead中的th标记，并随意调整表列的大小.但是，这在Bootstrap 4中不起作用.如何在Bootstrap 4中实现类似的功能?

In Bootstrap 3, I could apply col-sm-xx to the th tags in the thead and resize table columns at will. However this doesn't work in bootstrap 4. How can I achieve something like this in 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>

查看提供的编解码器大小不正确，尤其是当您向表中添加一些数据时.看看它是如何运行的:

Looking at the codeply provided it doesn't size properly, especially if you add some data to the table. See how this runs:

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

推荐答案

已更新2018年

确保您的表包含table类.这是因为 Bootstrap 4表是选择加入的" ，所以table类必须有意添加到表格中.

Make sure your table includes the table class. This is because Bootstrap 4 tables are "opt-in" so the table class must be intentionally added to the table.

http://codeply.com/go/zJLXypKZxL

Bootstrap 3.x还具有一些CSS来重置表单元格，以使它们不会浮动..

Bootstrap 3.x also had some CSS to reset the table cells so that they don't float..

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

我不知道为什么不是Bootstrap 4 alpha，但是它可能会在最终发行版中重新添加.添加此CSS将有助于所有列使用在thead中设置的宽度.

I don't know why this isn't is Bootstrap 4 alpha, but it may be added back in the final release. Adding this CSS will help all columns to use the widths set in the thead..

Bootstrap 4 Alpha 2演示

更新(自Bootstrap 4.0.0起)

现在，Bootstrap 4是flexbox，添加col-*时，表格单元将不会采用正确的宽度.一种解决方法是在表格单元格上使用d-inline-block类，以防止默认的display:flex of columns.

Now that Bootstrap 4 is flexbox, the table cells will not assume the correct width when adding col-*. A workaround is to use the d-inline-block class on the table cells to prevent the default display:flex of columns.

BS4中的另一个选项是使用sutils类来确定宽度...

Another option in BS4 is to use the sizing utils classes for width...

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

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

Lastly, you could use d-flex on the table rows (tr), and the col-* grid classes on the columns (th,td)...

<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(稳定)演示版

注意:将TR更改为显示:flex

Note: Changing the TR to display:flex can alter the borders

这篇关于表列大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！