无需JavaScript实现表格标题与select过滤器居顶两端布局

当然可以实现这个需求，核心是借助CSS Flexbox控制标题和选择器的对齐逻辑，同时让容器宽度和表格自适应匹配，完美适配响应式场景。

实现步骤及代码示例 #

首先调整HTML结构，把标题和<select>过滤器放在同一个父容器中，确保和表格宽度联动：

<div class="table-container">
  <div class="table-header">
    <h2>销售数据报表</h2>
    <select class="year-filter">
      <option value="2024">2024年</option>
      <option value="2023">2023年</option>
      <option value="2022">2022年</option>
    </select>
    <select class="month-filter">
      <option value="all">全部月份</option>
      <option value="1">1月</option>
      <option value="2">2月</option>
    </select>
  </div>
  <table>
    <thead>
      <tr>
        <th>日期</th>
        <th>销售额</th>
        <th>客户数</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>2024-01</td>
        <td>¥18,000</td>
        <td>45</td>
      </tr>
      <tr>
        <td>2024-02</td>
        <td>¥22,000</td>
        <td>58</td>
      </tr>
    </tbody>
  </table>
</div>

然后添加CSS样式，解决宽度自适应和对齐问题：

/* 外层容器，处理响应式滚动 */
.table-container {
  max-width: 100%;
  overflow-x: auto;
}

/* 标题与过滤器的容器，核心flex布局 */
.table-header {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 两个选择器之间的间距 */
  margin-bottom: 1rem;
  width: fit-content; /* 让容器宽度匹配表格内容宽度 */
  min-width: 100%; /* 小屏幕下强制占满父容器，避免布局错乱 */
}

/* 标题自动占据剩余空间，把过滤器推到右侧 */
.table-header h2 {
  margin: 0;
  margin-right: auto;
}

/* 表格样式，确保宽度和容器联动 */
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #eee;
  padding: 0.75rem;
  text-align: left;
}

th {
  background-color: #f8f9fa;
}

关键细节说明 #

1. 宽度自适应处理：.table-header使用width: fit-content让它的宽度跟随表格内容自动调整，同时min-width: 100%保证在小屏幕下占满父容器，避免标题和过滤器挤在一起。
2. Flex对齐技巧：标题设置margin-right: auto是核心——在flex布局中，这个属性会让元素自动占据容器的剩余空间，从而把右侧的过滤器挤到最右端，比justify-content: space-between更稳妥，即使标题文字过长换行，依然能保持过滤器的右侧位置。
3. 响应式兼容：外层.table-container添加overflow-x: auto，确保表格在小屏幕下可以横向滚动，不会溢出页面。

如果之前尝试Flex布局失败，大概率是没给容器设置合适的宽度规则，或者表格没有设置width: 100%导致容器和表格宽度不匹配，按照上面的方案调整即可解决问题。

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