如何在 Bootstrap 4.0 table 上使这些固定列的宽度响应？

Question

我一直在尝试让这个基于类似的 questions/answers 工作，但没有成功。

这是我尝试通过显式设置每列的宽度来修复列宽度，但没有任何改变！

<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>

如果您想伸出援手，请点击这里 Fiddle。谢谢！

这是

Answer 1

在 fiddle 中，table 正文中的行具有内联 css，这使得所有列的宽度都相同 - 为 160 像素。你需要删除它。您可以使用 class col-1 等来指定 table 列宽。

    <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>

如何在 Bootstrap 4.0 table 上使这些固定列的宽度响应？

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

javascript

html

bootstrap-4

html-table