Is there a method to ensure equal width for all columns in a bootstrap table? By default, it appears to allocate more space to columns with larger content, but I want them all to have the same width. Below is 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 appears significantly wider due to more text content, although there is ample space to maintain equal column width.
If possible, I'd like to avoid using the "col-x" classes since my columns are dynamically generated and may exceed 12 columns.