如何在 Bootstrap 4 中调整表格列的大小？-css教程-PHP中文网

如何在 Bootstrap 4 中调整表格列的大小？

Susan Sarandon

发布： 2024-10-29 19:38:30

原创

382 人浏览过

How to Resize Table Columns in Bootstrap 4?

Bootstrap 4 中的表列大小

初始问题：

在 Bootstrap 3 中，使用 col-sm-xx表头 (TH) 元素上的类允许轻松调整列大小。但是，这在 Bootstrap 4 中不再起作用。本文提供了实现类似功能的解决方案。

解决方案 1：确保表类

验证您的表具有该表应用类。 Bootstrap 4 表是“选择加入”的，这意味着必须添加此类才能激活所需的行为。

解决方案 2：利用 CSS Reset

确保正确显示列宽度，添加以下 CSS：

<code class="css">table td[class*=col-], table th[class*=col-] {
    position: static;
    display: table-cell;
    float: none;
}</code>

登录后复制

解决方案 3：内联块类

要防止列采用不正确的宽度，请应用 d-inline -表格单元格的块类。

解决方案 4：调整大小实用程序类

Bootstrap 4 包含可用于设置列宽的大小调整实用程序类：

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

登录后复制

解决方案 5：Flexbox

为了提高灵活性，请考虑在表行上使用 Flexbox，在列上使用网格类：

<code class="html"><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></code>

登录后复制

以上是如何在 Bootstrap 4 中调整表格列的大小？的详细内容。更多信息请关注PHP中文网其他相关文章！