如何在最宽表格无法再收缩时阻止其他表格继续收缩？

你的问题核心在于：当前每个表格都是独立的width:100%，窄表格会一直收缩到自身的最小宽度，而最宽的表格先触碰到极限开始溢出，最终导致对齐失效。我们只需要让所有表格共享同一个「宽度基准」，就能让它们同步停止收缩，始终保持对齐状态。

解决方案思路 #

给所有表格套一个统一的容器，让这个容器的最小宽度等于最宽表格的最小宽度，同时让容器在空间足够时自动占满父元素宽度。这样就能实现：

• 当容器宽度充足时，所有表格铺满容器，保持列对齐
• 当容器缩小到最宽表格的最小宽度时，容器不再收缩，所有表格跟着锁定宽度，父元素自动显示水平滚动条，对齐状态完全保留

修改后的完整代码 #

CSS 部分

article { 
  margin: 0 40px;
  overflow-x: auto; /* 容器变窄时自动显示水平滚动条 */
}
.table-container {
  display: inline-block;
  width: 100%; /* 空间足够时完全占满父元素 */
  min-width: min-content; /* 最小宽度取内部最宽表格的最小内容宽度 */
}
article .table-container > table { 
  border-collapse: collapse; 
  border: 1px solid rgba(0,0,0,0.2); 
  width: 100%; /* 表格始终占满容器宽度 */
  font-size: 90%; 
  margin-bottom:20px; 
}
article .table-container > table+table.cont { 
  border-top:none; 
}
article .table-container > table>thead { 
  white-space: nowrap; 
}
article .table-container > table>thead td { 
  text-align: right; 
  background-color: #cfe0e6; 
  color: #1a1b1f; 
  padding-top: 1px; 
  padding-bottom:3px; 
}
article .table-container > table>tbody>tr>td { 
  white-space: nowrap; 
  transition: background-color .3s; 
}
article .table-container > table>tbody>tr>td:not(:first-child) { 
  text-align:right; 
  width:1px 
}
article .table-container > table tr>td:not(:first-child) { 
  padding:0 5px 
}

HTML 部分

<article>
 <h2>Section title</h2>
 <div class="table-container">
  <table>
   <thead>
    <tr>
     <td></td>
     <td>Units</td>
     <td>Unit price</td>
     <td>Subtotal</td>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>Item 1 relatively long name</td>
     <td><span class="vl">3,530</span></td>
     <td><span class="vl">0.130848</span></td>
     <td><span class="vl">461.89</span></td>
    </tr>
    <tr>
     <td>Item 2 relatively long name</td>
     <td><span class="vl">3,459</span></td>
     <td><span class="vl">0.108193</span></td>
     <td><span class="vl">374.24</span></td>
    </tr>
    <tr>
     <td>Item 3 relatively long name</td>
     <td><span class="vl">1,831</span></td>
     <td><span class="vl">0.074858</span></td>
     <td><span class="vl">137.06</span></td>
    </tr>
   </tbody>
  </table>
  <table>
   <thead>
    <tr>
     <td></td>
     <td>Units</td>
     <td>Period</td>
     <td>Unit price</td>
     <td>Subtotal</td>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>Item 4 relatively long name</td>
     <td><span class="vl">49.000</span></td>
     <td><span class="vl">24</span></td>
     <td><span class="vl">0.108735</span></td>
     <td><span class="vl">127.87</span></td>
    </tr>
    <tr>
     <td>Item 5 relatively long name</td>
     <td><span class="vl">51.300</span></td>
     <td><span class="vl">24</span></td>
     <td><span class="vl">0.065241</span></td>
     <td><span class="vl">80.32</span></td>
    </tr>
    <tr>
     <td>Item 6 relatively long name</td>
     <td><span class="vl">47.000</span></td>
     <td><span class="vl">24</span></td>
     <td><span class="vl">0.043494</span></td>
     <td><span class="vl">49.06</span></td>
    </tr>
   </tbody>
  </table>
  <table>
   <thead>
    <tr>
     <td></td>
     <td>Units</td>
     <td>Unit price</td>
     <td>Subtotal</td>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>Item 7 relatively long name</td>
     <td><span class="vl">599</span></td>
     <td><span class="vl">0.041554</span></td>
     <td><span class="vl">24.89</span></td>
    </tr>
    <tr>
     <td>Item 8 relatively long name</td>
     <td><span class="vl">611</span></td>
     <td><span class="vl">0.041554</span></td>
     <td><span class="vl">25.39</span></td>
    </tr>
   </tbody>
  </table>
  <table>
   <tbody>
    <tr>
     <td>Total</td>
     <td><span class="vl cal">1,280.72</span></td>
    </tr>
   </tbody>
  </table>
 </div>
</article>

关键细节说明 #

• table-container 的 display: inline-block 让它能自动识别内部最宽表格的最小内容宽度
• min-width: min-content 锁定了容器的最小宽度，确保它不会窄于任何表格的极限收缩宽度
• width: 100% 让容器在父元素宽度充足时自动铺满，表格也随之占满空间
• article 的 overflow-x: auto 确保当容器宽度超过父元素时，自动显示滚动条，不会让内容溢出容器

这样调整后，所有表格会同步收缩，直到最宽的表格无法再缩小，此时所有表格都会锁定宽度，完美保持列对齐，同时容器出现滚动条解决溢出问题。

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