如何让Navbar随超宽DataTables表格内容同步横向滚动？

我正在开发一个基于Django框架的网站，首页有一个超出屏幕宽度的大型DataTables表格。目前遇到的问题是：导航栏（Navbar）与表格部分区域无法随表格内容同步横向滚动，尝试解决许久仍无进展。相关代码如下：

表格HTML #

<table id="myTable" class="display dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Job URL</th>
      <th scope="col">Job Title</th>
      <th scope="col">Job Location</th>
      <th scope="col">Posted Date</th>
      <th scope="col">Company Name</th>
      <th scope="col">Company URL</th>
      <th scope="col">Country</th>
      <th scope="col">Postal Code</th>
      <th scope="col">Industry</th>
      <th scope="col">Founded Date</th>
      <th scope="col">Phone Number</th>
      <th scope="col">Number Of Employees</th>
    </tr>
  </thead>
  <tbody>
    {% for job in get_jobs%}
    <tr>
      <td scope="row">{{ forloop.counter }}</td>
      <td><a href="{{job.company_url}}" target="_blank">{{job.job_url}}</a></td>
      <td style="width: 100%">{{job.job_title}}</td>
      <td>{{job.job_location}}</td>
      <td>{{job.posted_date}}</td>
      <td>{{job.company_name}}</td>
      <td>
        <a
          href="{{job.company_url}}"
          target="_blank"
          id="company_url"
          data-url="{{job.company_url}}"
          data-name="{{job.company_name}}"
          >{{job.company_url}}</a
        >
      </td>
      <td>{{job.job_location}}</td>
      <td>{{job.postal_code}}</td>
      <td>{{job.industries}}</td>
      <td>{{job.found_date}}</td>
      <td>{{job.phone}}</td>
      <td>{{job.number_of_employees}}</td>
    </tr>
    {%endfor%}
  </tbody>
</table>

表格CSS #

table {
  width: 100%;
}

td {
  max-width: 100%;
  white-space: nowrap;
  padding: 10px;
}

表格JS #

$(document).ready(function () {
  $("#myTable").DataTable({
    columnDefs: [{ type: "natural", targets: "_all" }],
    order: [[3, "desc"]],
  });
});

当前表格效果如图（灰色区域为Navbar），可见Navbar与表格部分区域未随表格内容同步滚动：

内容的提问来源于stack exchange，提问作者Stefan Vukovic