Css 表列大小

Updated 2018个

请确保您的餐桌包括table级.这是因为Bootstrap 4 tables are "opt-in"，所以必须故意将table类添加到表中.

http://codeply.com/go/zJLXypKZxL个

Bootstrap3.x还提供了一些CSS来重置表格单元格，以便它们不会浮动.

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

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

Bootstrap 4 Alpha 2 Demo

UPDATE (as of Bootstrap 4.0.0)

现在Bootstrap 4是Flexbox，表格单元格在添加col-*时将不会采用正确的宽度.一种解决方法是在表格单元格上使用d-inline-block类来阻止默认显示:列的伸缩.

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