Bootstrap 5 table equal column width

Question

Is there any way to force all the columns inside a bootstrap table to have the same width ? By default it seems to give a larger size to elements that have more content but I'd like all of them to share the same width. Here's my code:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">All</th>
      <th scope="col">Selected</th>
      <th scope="col">1</th>
      <th scope="col">12.5</th>
      <th scope="col">301</th>
      <th scope="col">405.88</th>
      <th scope="col">77</th>
    </tr>
  </thead>
  <tbody id="table-body">
    <tr>
      <th scope="row">123456</th>
      <td class="table-danger"></td>
      <td class="table-success"></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

The "selected" column ends up being much larger than the rest since it's more text, even though there's enough space to keep all columns using the same width.

I would like to avoid using the "col-x" classes if possible since my columns are generated dynamically and i can easily end up with more than 12 columns.

Answer 1

You can do it in your table header without any extra css or anything using the col-<n> class. Just adjust accordingly to your needs.

<tr>
    <th scope="col" class="col-1">#</th>
    <th scope="col" class="col-3">All</th>
    <th scope="col" class="col-3">Selected</th>
    <th scope="col" class="col-1">1</th>
    <th scope="col" class="col-1">12.5</th>
    <th scope="col" class="col-1">301</th>
    <th scope="col" class="col-1">405.88</th>
    <th scope="col" class="col-1">77</th>
</tr>