表格列大小 [英] Table column sizing

问题描述

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

<th class="col-sm-3">3 列宽</th><th class="col-sm-5">5 列宽</th><th class="col-sm-4">4 列宽</th></thead>

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

<table class="table table-bordered"><头><tr class="row"><th class="col-sm-3">3 列宽</th><th class="col-sm-5">5 列宽</th><th class="col-sm-4">4 列宽</th></tr></thead><tr><td>123</td><td>456</td><td>789</td></tr></tbody>

解决方案

2018 年更新

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

http://codeply.com/go/zJLXypKZxL

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

table td[class*=col-], table th[class*=col-] {位置:静态；显示:表格单元格；浮动:无；}

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

中设置的宽度

Bootstrap 4 Alpha 2 演示

<小时>

更新(自 Bootstrap 4.0.0 起)

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

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

<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-* 网格类..

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

Bootstrap 4.0.0(稳定版)演示

注意:将 TR 更改为 display:flex 可以改变边框

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>

解决方案

Updated 2018

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

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 Demo

---

UPDATE (as of Bootstrap 4.0.0)

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.

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 Demo

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 (stable) Demo

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

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