如何让Header按钮与Table边缘始终对齐？窗口缩放时不偏移

问题原因 #

你的表格设置了min-width: 100%，当窗口宽度小于表格实际需要的最小宽度时，表格会横向超出窗口范围，但Header里的按钮是基于窗口右边缘定位的，导致两者边缘错位。

修复方案 #

把Header和表格包裹在同一个容器中，让Header的宽度与表格保持联动，同时处理容器的横向溢出：

1. 修改HTML结构 #

在Header和表格外层添加一个容器（比如class="container"）：

<body>
  <div class="container">
    <div class="header">
      <h1 class="title">Parameters</h1>
      <button type="button" class="addNewButton">
        <span>&plus; Add New</span>
      </button>
    </div>

    <table class="content-table">
      <!-- 表格原有内容保持不变 -->
    </table>
  </div>
</body>

2. 添加容器的CSS样式 #

给容器设置以下样式，确保它和表格宽度同步，并支持横向滚动：

.container {
  overflow-x: auto; /* 内容超出时显示横向滚动条 */
  max-width: 100%; /* 容器最大宽度不超过窗口 */
}

3. 调整Header的样式 #

移除Header的固定高度，改用内边距控制垂直空间，同时确保Header宽度与容器一致：

.header {
  padding: 10px 0; /* 替代固定高度，适配不同内容 */
  width: 100%; /* 让Header宽度与容器完全匹配 */
}

.header .title {
  display: inline-block;
  font-size: 26px;
  margin: 0; /* 移除默认margin，用Header的padding控制间距 */
}

.header .addNewButton {
  float: right;
  margin: 0; /* 移除默认margin，用Header的padding控制间距 */
  height: 40px;
  width: 100px;
  border: 0;
  background: #009879;
  box-shadow: none;
  border-radius: 5px;
  color: #fff;
}

完整修改后的CSS代码 #

* {
  font-family: sans-serif; /* Change your font family */
}

.container {
  overflow-x: auto;
  max-width: 100%;
}

.header {
  padding: 10px 0;
  width: 100%;
}

.header .title {
  display: inline-block;
  font-size: 26px;
  margin: 0;
}

.header .addNewButton {
  float: right;
  margin: 0;
  height: 40px;
  width: 100px;
  border: 0;
  background: #009879;
  box-shadow: none;
  border-radius: 5px;
  color: #fff;
}

.content-table {
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 0.9em;
  min-width: 100%;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.content-table thead tr {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
  font-weight: bold;
}

.content-table thead tr th:last-of-type {
  width: 20px;
}

.content-table th,
.content-table td {
  padding: 12px 15px;
}

.content-table tbody tr {
  border-bottom: 1px solid #dddddd;
}

.content-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.content-table tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}

.content-table tbody tr.active-row {
  font-weight: bold;
  color: #009879;
}

#actions {
  border: 1px solid black;
  display: flex;
}

效果说明 #

• 窗口宽度足够时，Header按钮与表格右边缘完全对齐
• 窗口宽度小于表格最小宽度时，容器会显示横向滚动条，Header会跟随表格一起滚动，始终保持按钮与表格边缘对齐

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