How do I resize Bootstrap 4 table columns?

Resizing Bootstrap 4 Table Columns

Bootstrap 3 allowed table column resizing using the col-sm-xx class on th tags in the thead. However, this method is not effective in Bootstrap 4.

Updated Approach

Step 1: Ensure "table" Class on the Table

Bootstrap 4 tables are "opt-in," meaning the table class must be explicitly added to the table element.

Step 2: Add CSS for Inline Block Display

Bootstrap 3 previously included CSS to reset table cell positions and prevent floating. This CSS is absent in Bootstrap 4 Alpha, but you can add it:

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

Step 3: Use Sizing Utility Classes (Bootstrap 4.0.0 and Later)

Alternatively, in Bootstrap 4.0.0 and beyond, you can employ the w-* utility classes for width:

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

Step 4: Utilize Flexbox (Bootstrap 4.0.0 and Later)

Another option is to use d-flex on tr rows and grid classes like col-* on columns:

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

The above is the detailed content of How do I resize Bootstrap 4 table columns?. For more information, please follow other related articles on the PHP Chinese website!