滚动层会裁剪溢出内容，要与显示层拆开

更新于 2026-09-21

**只要一个元素负责 `overflow-x: auto`，它就会裁剪超出边界的内容。** 所以「表格要能横向滚动」和「控制按钮要露在表格外侧」不能由同一个元素承担 —— 把 `.cm-md-table-wrap` 本身设成 `overflow-x: auto`，原本定位在表格上方/左侧的按钮就被裁掉了。

症状

给表格加横向滚动后，控制按钮消失（被裁），但按钮的定位值没改过。

修法：拆成两层 DOM

<div class="cm-md-table-wrap">        <!-- 不滚动，负责让溢出内容可见 -->
  <div class="cm-md-table-scroll">    <!-- 只负责横向滚动 -->
    <table class="cm-md-table">...</table>
  </div>
</div>
  • .cm-md-table-wrap { overflow: visible; }
  • .cm-md-table-scroll { overflow-x: auto; max-width: 100%; }
  • 按钮仍按表格外侧定位，不进滚动裁剪层，也不塞进单元格内容区。

被否掉的方向：把按钮塞进单元格内部

第一反应是「把按钮放进单元格里就不怕被裁」。这是错的：单元格内部空间有限，内容一多就遮挡表格内容（第一行/第一列内容短时才勉强能用）。问题不该用「换个地方放」解决，而该用「把职责分开」解决 —— 滚动是一层，显示是另一层。

可迁移的判断

遇到「加了某个样式后，别的东西不见了」，先看这个样式是否引入了 overflow 裁剪。滚动容器天然是裁剪容器，把「需要溢出显示的元素」和「需要滚动的容器」放在同一层，冲突是必然的。

相关

  • flex子项的百分比max-height不可靠 —— 同为「容器高度/裁剪导致的尺寸意外」，都要先问「约束施加在谁身上」
  • 折叠动画要有收起态过渡 —— 同类：动画/滚动这类视觉行为的实现层要单独考虑