I am trying to make something like this in Bootstrap 4, setting the columns of table in pixels, with fixed values, forcing the horizontal scroll inside the card, but is not working. The columns don't have the size I want. The columns sizes are going to be same for all devices.
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<table class="table-sm table-hover table-bordered text-center">
<thead>
<tr class="text-uppercase font-size-1">
<th width="500px" class="font-weight-medium"></th>
<th width="500px" class="font-weight-medium">produto</th>
<th width="500px" class="font-weight-medium">status</th>
<th width="500px" class="font-weight-medium">sku</th>
<th width="500px" class="font-weight-medium">preço</th>
<th width="500px" class="font-weight-medium">estoque</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
What am I doing wrong?
It does seem to be working here is the example code
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<table class="table-sm table-hover table-bordered text-center">
<thead>
<tr class="text-uppercase font-size-1">
<th style="width:100px" class="font-weight-medium">first</th>
<th style="width:200px" class="font-weight-medium">produto</th>
<th style="width:300px" class="font-weight-medium">status</th>
<th style="width:400px" class="font-weight-medium">sku</th>
<th style="width:500px" class="font-weight-medium">preço</th>
<th style="width:600px" class="font-weight-medium">estoque</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>