Table columns are not adjusting width properly with the table-responsive class.
I want to specify the width of the column containing Well Type to be 200px.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-bordered">
<tbody>
<tr>
<th></th>
<th></th>
<th width="200" style="width:200px;"></th>
<th></th>
<th></th>
<th></th>
<th class="text-center" colspan="2">Issue</th>
<th class="text-center" colspan="2">Inactive Category</th>
<th class="text-center" colspan="3">Action Steps</th>
<th></th>
<th class="text-center" colspan="2">Validation</th>
<th class="text-center" colspan="2">Approved</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th>Well Number</th>
<th>String Value</th>
<th>Well Type</th>
<th>Reservoir</th>
<th>Downtime Start/Rig Release</th>
<th>Downtime (in days)</th>
<th>Code</th>
<th>Description</th>
<th>Code</th>
<th>Description</th>
<th>Code</th>
<th>Description</th>
<th>Planned Date</th>
<th>Expected Rate</th>
<th>Status</th>
<th>Remarks</th>
<th>Status</th>
<th>Remarks</th>
<th>Action Category</th>
<th>Project</th>
<th>Case ID</th>
<th>Attachments</th>
<th>Remarks</th>
<th></th>
</tr>
</tbody>
<tbody>
<tr>
<td>Well Number</td>
<td>String Value</td>
<td>Well Type</td>
<td>Reservoir</td>
<td>Downtime Start/Rig Release</td>
<td>Downtime (in days)</td>
<td>Code</td>
<td>Description</td>
<td>Code</td>
<td>Incident Description</td>
<td>Code</td>
<td>Description</td>
<td>Planned Date</td>
<td>Expected Rate</td>
<td>Status</td>
<td>Comments</td>
<td>State</td>
<td>Notes</td>
<td>Category</td>
<td>Project Name</td>
<td>Case Title</td>
<td>Attachments</td>
<td>Review Summary</td>
<td>
<a href="#">Edit</a>
<a href="#">Cancel</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>