How to Resize Table Columns in Bootstrap 4?

Table Column Sizing in Bootstrap 4

Initial Problem:

In Bootstrap 3, using the col-sm-xx class on table header (TH) elements allowed for easy column resizing. However, this no longer functions in Bootstrap 4. This article provides solutions for achieving similar functionality.

Solution 1: Ensure Table Class

Verify that your table has the table class applied. Bootstrap 4 tables are "opt-in," meaning this class must be added to activate the desired behavior.

Solution 2: Utilize CSS Reset

To ensure proper display of column widths, add the following CSS:

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

Solution 3: Inline Block Class

To prevent the columns from assuming incorrect widths, apply the d-inline-block class to the table cells.

Solution 4: Sizing Utility Classes

Bootstrap 4 includes sizing utility classes that can be used to set column widths:

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

Solution 5: Flexbox

For increased flexibility, consider using flexbox on table rows and grid classes 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 to Resize Table Columns in Bootstrap 4?. For more information, please follow other related articles on the PHP Chinese website!