I have implemented a vue app using regular Bootstrap 4 without Vue-Bootstrap. The issue I'm facing is with one of the responsive-tables on my site. Despite trying different methods, including copying a fully functional table, this specific table does not adhere to the specified widths.
HTML
<div class="form-group row">
<div class="col-12">
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col" style="width: 8%">Item</th>
<th scope="col" style="width: 3%">Description</th>
<th scope="col" style="width: 5%">Brand</th>
<th scope="col" class="text-right" style="width: 4%">RRP</th>
<th scope="col" class="text-right" style="width: 4%">Price</th>
<th scope="col" style="width: 4%">Stock level</th>
<th scope="col" style="width: 5%">Weight (KG)</th>
<th scope="col" style="width: 6%">EAN</th>
<th scope="col" style="width: 5%">MPN</th>
<th scope="col" style="width: 31%">Web friendly name</th>
</tr>
</thead>
<tbody>
<tr v-for="product in stock">
<td scope="row">{{product.item}}</td>
<td class="text-truncate">
<span v-tooltip:bottom.html="product.description">{{product.description}}</span>
</td>
<td>{{product.class}}</td>
<td class="text-right">{{product.retail_price | amountFormat}}</td>
<td class="text-right">{{product.price_each | amountFormat}}</td>
<td>{{product.free_stock}}</td>
<td>{{product.weight}}</td>
<td class="text-truncate">
<span v-tooltip:bottom.html="product.ean">{{product.ean}}</span>{{product.ean}}</td>
<td class="text-truncate">
<span v-tooltip:bottom.html="product.mpn">{{product.mpn}}</span>{{product.mpn}}
</td>
<td class="text-truncate">
<span v-tooltip:bottom.html="product.web_name">{{product.web_name}}</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
The table displays with a horizontal scrollbar. It's been noted that despite setting the 'Description' column width to 3%, it doesn't seem correct. https://i.sstatic.net/Kam9Z.png
All other tables are structured similarly, and no additional CSS is being applied to this particular page to cause the discrepancy.
Even when attempting to adjust the first column width to 2% using devtools, the change isn't reflected, leaving me puzzled about the root cause.