如何在 Bootstrap 4 中調整表格列的大小？-css教學-PHP中文網

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

Susan Sarandon

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

原創

381 人瀏覽過

How to Resize Table Columns in Bootstrap 4?

Bootstrap 4 中的表列大小

初始問題：

在Bootstrap 3 中，使用col-sm- xx表頭(TH) 元素上的class 允許輕鬆調整列大小。但是，這在 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>

登入後複製

解法33 ：內聯塊類

要防止列採用不正確的寬度，請套用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中文網其他相關文章！