使用Materialize CSS时固定高度表格行占用额外空间问题排查

问题场景 #

为优化UI，我需要实现固定高度、内容可垂直滚动的表格组件。给表格容器添加以下样式后：

.table-container {
  height: 60vh;
  overflow-y: auto;
}

出现了两个异常：

• 页面整体出现无内容的空白垂直滚动条
• 表格中超出容器高度的不可见行仍占用页面空间，导致页面滚动条能滚动到这些空白区域

问题根源 #

调试后发现，问题出在Materialize CSS的默认样式上：它给表格内的checkbox设置了position: absolute属性，这个绝对定位破坏了表格行的正常布局流，导致容器的overflow-y: auto无法正确截断超出部分。

解决方案 #

将checkbox的position属性改为static，或通过内联样式直接覆盖Materialize的默认样式即可解决问题。

修复示例代码 #

复现问题的代码片段

<div class="table-container">
  <table class="striped">
    <thead>
      <tr>
        <th><label><input type="checkbox" /><span>选择</span></label></th>
        <th>名称</th>
        <th>描述</th>
      </tr>
    </thead>
    <tbody>
      <!-- 大量表格行，超出容器高度 -->
      <tr><td><label><input type="checkbox" /><span></span></label></td><td>项目1</td><td>描述1</td></tr>
      <!-- 重复多行... -->
    </tbody>
  </table>
</div>

修复后的样式

.table-container input[type="checkbox"] {
  position: static !important; /* 覆盖Materialize的默认绝对定位 */
}

或者直接使用内联样式：

<input type="checkbox" style="position: static;" />

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