I am facing an issue with applying custom width to each header of a table in my html. Despite having bootstrap4 integrated, the custom widths are not being applied.
Below is the complete HTML code for the table:
<div class="row">
<div class="col-12">
<table class="table table-bordered">
<thead>
<tr>
<th class="user-profile-th" style="width:10%;">
<label class="container-checkbox"><input class="site-checkbox "
type="checkbox" ><span
class="checkmark-checkbox"></span></label></th>
<th class="user-profile-th brand" style="width:20%;">Brand</th>
<th class="user-profile-th link-code" style="width:40%;">Link/Code</th>
<th class="user-profile-th" style="width:15%;">Clicks</th>
<th class="user-profile-th" id="status" style="width:15%;">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td><label class="container-checkbox"><input class="site-checkbox"
type="checkbox"><span class="checkmark-checkbox"></span></label></td>
<td>ClassPass</td>
<td class="refrl">
www.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pk
</td>
<td>0</td>
<td>
<div class="tag-cstm rejected"> Rejected </div>
</td>
</tr>
<tr>
<td><label class="container-checkbox"><input class="site-checkbox"
type="checkbox"><span class="checkmark-checkbox"></span></label></td>
<td>Fave</td>
<td class="refrl">www.yoyo.com</td>
<td>0</td>
<td>
<div class="tag-cstm rejected"> Rejected </div>
</td>
</tr>
<tr>
<td><label class="container-checkbox"><input class="site-checkbox "
type="checkbox"><span class="checkmark-checkbox"></span></label></td>
<td>artificial inteliggence</td>
<td class="refrl">www.xyxx.com</td>
<td>0</td>
<td>
<div class="tag-cstm approved"> Approved </div>
</td>
</tr>
<tr>
<td><label class="container-checkbox"><input class="site-checkbox "
type="checkbox"><span class="checkmark-checkbox"></span></label></td>
<td>polymorphism</td>
<td class="refrl">www.oopconcepts.com</td>
<td>0</td>
<td>
<div class="tag-cstm pending"> Pending </div>
</td>
</tr>
</tbody>
</table>
<!--bindings={ "ng-reflect-ng-if": "false"}-->
</div>
</div>Check out my full code on JSFiddle here
Does anyone know why the custom widths are not applying as expected?