Bootstrap 5 table equal column width - html

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

Add a class to your "td" and specify their size in css.
Define your table size may also be necessary.
table {
table-layout: fixed;
width: your_size px;
}

Answer 2

No extra CSS is required. You could put all of the Columns inside a single Row and then use the row-cols class. What this does is, instead of dictating a class on each Column for its width, you dictate the width of all Columns using a class in the parent Row.
The code below says whatever happens only put 2 Columns on each Row but you can change 2 to anything between 1 and 12.
<div class="row row-cols-2">
<div class="col">
<!-- Content 1 -->
</div>
<div class="col">
<!-- Content 2 -->
</div>
<div class="col">
<!-- Content 3 -->
</div>
<div class="col">
<!-- Content 4 -->
</div>
<!-- Add as many columns as you want -->
</div>
Also, somebody may correct me here but I am fairly certain that adding the row or col class to your table elements is going to make a real struggle when it comes to layout.

Answer 3

Setting table-layout to fixed should automatically give you equal width columns in Bootstrap 5.
your.html
<table class="table table-hover custom-class"> ... </table>
your-custom.css
.custom-class {
table-layout: fixed;
}

Answer 4

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>