How to make these fixed cols’ width on a Bootstrap 4.0 table-responsive?

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