How to Achieve Column Resizing in Bootstrap 4 Tables?

Table Column Sizing in Bootstrap 4

Question:

In Bootstrap 3, one could modify the column width of a table header row by adding col-sm-xx to th tags. This functionality seems to be missing in Bootstrap 4. How can one achieve column resizing in Bootstrap 4?

Answer:

Updated (2018)

To ensure successful operation, ensure that the table contains the table class. Bootstrap 4 tables are "opt-in," requiring the explicit addition of the table class to initiate the table functionality.

Bootstrap 3.x Adjustment

In Bootstrap 3.x, additional CSS was employed to remove the floating status of table cells:

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

Bootstrap 4 Alpha omitted this customization, although its inclusion in the final release is possible. Its addition would ensure table cells respect widths set in the table header.

Bootstrap 4 Alpha 2 Update

With Bootstrap 4's transition to flexbox, column widths are not automatically inherited from the table header. To rectify this, utilize the d-inline-block class on table cells, overriding the default display:flex setting of columns.

Additional Resizing Options

a. Sizing Utility Classes (Bootstrap 4.0.0)

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

b. Flexbox and Column Grid Classes

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

Note: Applying display:flex to table rows may affect border display.

The above is the detailed content of How to Achieve Column Resizing in Bootstrap 4 Tables?. For more information, please follow other related articles on the PHP Chinese website!