使用Bootstrap/CSS解决filter div与表格表头宽高不一致问题

需要实现表格关联的筛选栏、表格容器两个div宽高保持一致，初始代码如下：

HTML代码 #

<div class="container">
    {{#if orders}}
    <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>
    <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>
        </table>
    </div>
</div>

CSS代码 #

.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;
}

给表格添加text-nowrap类后，筛选栏div和表格表头宽高无法对齐，出现布局错位。

text-nowrap会强制表格单元格内容不换行，表格宽度会根据内容自动撑开，不再受父容器宽度限制；而上方筛选栏默认是块级元素，宽度按父容器可用宽度计算，二者宽度计算基准不一致，同时导航项使用float布局存在高度塌陷问题，共同导致错位。

按以下步骤调整代码即可实现对齐：

• 先修复HTML结构bug，补全Cars导航项缺失的</li>闭合标签，避免浏览器容错解析带来的异常布局。
• 给外层容器添加布局规则，让容器宽度跟随内部最宽的表格自适应，同时保证小宽度场景下不缩窄：

.container {
  width: fit-content;
  min-width: 100%;
}

• 强制两个子div（筛选栏、表格容器）宽度和父容器完全匹配，同时修正盒模型计算规则：

.filter, .table {
  width: 100%;
  box-sizing: border-box;
}

• 替换原有浮动布局为Flex布局，彻底解决高度塌陷问题，同时保证导航项排列稳定：

.tab {
  /* 保留原有.tab样式，新增以下规则 */
  display: flex;
  margin: 0;
  list-style: none;
}
/* 移除.tab a原有float: left;属性，替换为以下规则 */
.tab a {
  float: none;
  display: block;
}

调整完成后，筛选栏会和下方表格保持完全一致的宽度，高度也会自动适配内容实现对齐。

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