响应式布局中同步Bootstrap Div宽度与高度的技巧：以表格与导航为例

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="filter">
    <ul class="nav nav-pills tab ">
      <li class="nav-item">
        <a class="nav-link tablinks active" href="#">Products</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Cars</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Servicing</a>
      </li>
    </ul>
  </div>
  <!-- 引入table-wrapper -->
  <div class="table-wrapper">
    <div class="table">
      <table class="table tab text-nowrap">
        <thead>
          <tr>
            <th>Order ID</th>
            <th>Customer ID</th>
            <th>Product ID</th>
            <th>Product Name</th>
            <th>Quantity</th>
            <th>Unit Price</th>
            <th>Amount</th>
            <th>Order Date</th>
            <th>Delivery Status</th>
            <th></th>
            <th></th>
          </tr>
        </thead>
        <tbody>
            <!-- 表格内容 -->
        </tbody>
      </table>
    </div>
  </div>
</div>

/* 现有样式保持不变 */
.nav-pills .nav-link.active {
  background-color: #8B0000;
  color: white;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  color: black;
}

.tab a {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  color: #000000;
}

thead th {
  background-color: #8B0000;
  color: white;
}

/* 新增的table-wrapper样式 */
.table-wrapper {
  width: 100%; /* 确保包装器占据父容器的全部宽度 */
  overflow-x: scroll; /* 允许水平滚动 */
}

/* 现有样式 */
.tab a {
  /* ... 其他样式 ... */
  padding: 14px 16px; /* 导航链接的内边距 */
  /* ... */
}

thead th {
  /* ... 其他样式 ... */
  background-color: #8B0000;
  color: white;
  padding: 12px 8px; /* 调整表格表头的垂直内边距以匹配导航链接高度 */
  /* ... */
}

/* 如果需要，也可以调整表格单元格的内边距 */
.table td {
  padding: 8px; /* 示例值，根据实际情况调整 */
}