JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container text-left ">
<table class="table table-bordered table-hover ">
<thead style=" border-width: 5px">
<tr>
<th class="col-fit">fdfffffffffffffffffffffffffffffffffffffffff</th>
<th class="col-fit">adfsfds</th>
<th class="col-fit">celfdla</th>
<th class="col-fit">cella</th>
<th class="col-fit">cella</th>
<th id="piros">piros</th>
</tr>
</thead>
<tbody>
<tr>
<td>cella</td>
<td>fgg</td>
<td>cella</td>
</tr>
<tr>
<td>cella</td>
<td>cella</td>
<td>cella</td>
</tr>
<tr>
<td>cella</td>
<td>cellf</td>
<td>cella</td>
</tr>
<tr>
<td>cella</td>
<td colspan="2">cellakinyujtoz</td>
</tr>
</tbody>
</table>
</div>
<hr>
<div class="container text-left ">
<table class="table table-bordered table-hover table-fit">
<thead style=" border-width: 5px">
<tr>
<th>fdfffffffffffffffffffffffffffffffffffffffff</th>
<th>adfsfds</th>
<th>celfdla</th>
<th>cella</th>
<th>cella</th>
<th id="piros">piros</th>
</tr>
</thead>
<tbody>
<tr>
<td>cella</td>
<td>fgg</td>
<td>cella</td>
</tr>
<tr>
<td>cella</td>
<td>cella</td>
<td>cella</td>
</tr>
<tr>
<td>cella</td>
<td>cellf</td>
<td>cella</td>
</tr>
<tr>
...
CSS
.table .col-fit {
width: 0;
}
.table.table-fit {
width: auto;
}