When using Bootstrap 5 to create responsive tables, I encountered an issue where columns with a lot of text caused other columns to get squished, resulting in a weird appearance. I am looking for a way to prevent this by ensuring that columns with less text and the table headers do not get cut off. The table is set to be responsive, which in Bootstrap's CSS includes overflow-x: auto.
Here is a picture of how the table looks on mobile
Here is what it looks like on PC
<head>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72101d1d06010600130232475c425c425f1017061343">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<div class="container">
<div class="table-responsive">
<table class="table table-sm table-bordered table-hover">
<thead class="table-warning">
<tr>
<th scope="col">Ticket ID</th>
<th scope="col">Asset Type Or User</th>
<th scope="col">Asset Tag</th>
<th scope="col">User ID</th>
<th scope="col">Name</th>
<th scope="col">Location</th>
<th scope="col">Description</th>
<th scope="col">Date Added</th>
<th scope="col">Priority</th>
<th scope="col">Mark As Done</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">4</th>
<td>computer</td>
<td>C-Place-Holder</td>
<td>NA</td>
<td>Tom Blow</td>
<td>In Health Building, Bottom Floor</td>
<td>User would like to print color, has missing files, and monitor is flickering.</td>
<td>2021-02-24</td>
<td>3</td>
<td>
<button class="btn btn-primary" id="4" onclick="markDone(4)">Done</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>