[FIXED] How to make these fixed cols' width on a Bootstrap 4.0 table-responsive?

Issue

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

Solution

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>

Answered By - T.Shah

Answer Checked By - Gilberto Lyons (PHPFixing Admin)