How to Set Fixed Widths for Elements in HTML Tables Using Bootstrap?

Fixing Width for in HTML

Setting fixed widths for table data cells () is a common styling requirement. However, it can be challenging to achieve this and you may have tried various approaches without success.

Bootstrap 4.0

Unfortunately, in Bootstrap 4.0.0, you cannot use the col-* classes (as they only work in Firefox, not Chrome). Instead, you need to use the following workaround:

<tr>
  <th>

Bootstrap 3.0

In Bootstrap 3.0, you can use the "col-md-" class, where "" represents the number of columns of width you want.

<tr>
    <td class="col-md-2">A</td>
    <td class="col-md-3">B</td>
    <td class="col-md-6">C</td>
    <td class="col-md-1">D</td>
</tr>

Bootstrap 2.0

For Bootstrap 2.0, use the "span*" class, following the same pattern as Bootstrap 3.0.

<tr>
    <td class="span2">A</td>
    <td class="span3">B</td>
    <td class="span6">C</td>
    <td class="span1">D</td>
</tr>

Important Note

If you have elements in your table, ensure you set the width on the elements and not on the elements. This is because elements inherit their width from their parent elements.

The above is the detailed content of How to Set Fixed Widths for Elements in HTML Tables Using Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!