I've been trying to get this one to work based on similar questions/answers, but no success.
This is my attempt to fix the col width by explicitly setting each column's width, but nothing changes!
<thead style="white-space: nowrap">
<tr>
<th style="width: 1%" class="text-center">ClientID</th>
<th style="width: 2%" class="text-center">Task Nº</th>
<th style="width: 25%" class="text-center">Task</th>
<th style="width: 4%" class="text-center">Date Assigned</th>
<th style="width: 4%" class="text-center">Link To File</th>
<th style="width: 22%" class="text-center">Notes</th>
<th style="width: 14%" class="text-center">Approval</th>
<th style="width: 26%" class="text-center">Comments</th>
</tr>
</thead>
Here's the Fiddle if you feel like giving a hand. Thank you!
Here's
In the fiddle the row in table body has inline css that makes the column width same for all - at 160px. You need to remove that. You can use class col-1 etc to specify table column width.
<div id="search-results" class="table-responsive">
<table class="table table-sm table-striped" id="dtable" style="font-size:0.9em">
<thead style="white-space: nowrap">
<tr>
<th class="text-center col-1">ClientID</th>
<th class="text-center col-1">Task Nº</th>
<th class="text-center col-2">Task</th>
<th class="text-center col-1">Date Assigned</th>
<th class="text-center col-1">Link To File</th>
<th class="text-center col-1">Notes</th>
<th class="text-center col-2">Approval</th>
<th class="text-center col-3">Comments</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-middle" style="word-wrap: break-word;text-align:center">AA001</td>
<td class="align-middle" style="word-wrap: break-word;text-align:center">4</td>
<td class="align-middle" style="word-wrap: break-word;text-align:center">Review and approve content recommendations</td>
<td class="align-middle" style="word-wrap: break-word;text-align:center">5/19/2022</td>
<td class="align-middle" style="word-wrap: break-word;text-align:center"></td>
<td class="align-middle" style="word-wrap: break-word;text-align:center">fafdaa</td>
<td class="text-center" style="align-middle"><select class="text-center" name="D1" style="border-radius: 0.2rem">
<option value="empty"></option>
<option value="Approved">Approved</option>
<option value="Discuss">Discuss</option>
<option value="Rejected">Rejected</option>
</select></td>
<td><input type="text" name="comments" style="width:99%;"></td>
</tr>
</tbody>
</table>
</div>