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

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

DDD

發布： 2024-10-30 05:57:28

原創

658 人瀏覽過

How do I resize Bootstrap 4 table columns?

調整Bootstrap 4 表列的大小

Bootstrap 3 允許使用thead 中的標籤上的col-sm-xx 類別來調整表列的大小。但是，此方法在 Bootstrap 4 中無效。

更新方法

第1 步：確保Table 上的「table」類別

Bootstrap 4 表是「選擇加入」的，這意味著表類別必須明確添加到表格元素中。

第 2 步：新增用於內嵌區塊顯示的 CSS

Bootstrap 3 之前包含 CSS 來重設表格單元位置並防止浮動。 Bootstrap 4 Alpha 中沒有此CSS，但您可以加入它：

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

登入後複製

第3 步：使用調整大小實用程式類別（Bootstrap 4.0.0 及更高版本）

或者，在Bootstrap 4.0.0 及更高版本中，您可以使用w-* 實用程式類別來設定寬度：

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

登入後複製

第4 步：利用Flexbox（ Bootstrap 4.0.0 及更高版本）

另一個選項是在tr 行上使用d-flex 並在列上使用像col-* 這樣的網格類：

<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中文網其他相關文章！