绝对定位居中表格超出屏幕时Y轴溢出滚动不生效问题

• 代码存在低级拼写错误：CSS中position属性值错写为absloute（正确拼写为absolute），同时CSS定义的类名.toAlignTable和HTML中table标签写的toaligntable大小写不匹配，直接导致部分样式未生效。
• 居中逻辑没有设置高度上限：用绝对定位+transform: translate(-50%,-50%)实现居中时，容器设置height: auto，内容增多时高度会无限增长，没有和视口高度绑定，也没有配置溢出滚动规则，内容超出视口后直接被截断。
• 原生table元素不支持overflow属性：table默认display属性为table，直接给table标签加滚动相关样式不会生效，必须由块级父容器承载滚动逻辑。
• 定位逻辑天生缺陷：用top: 48%+偏移的居中方式，当表格总高度超过视口高度时，表格顶部会被移出视口边界，就算加了滚动条，顶部内容也无法滚动查看。

放弃绝对定位+偏移的居中方式，改用flex布局做视口居中，同时给表格套一层独立的滚动容器，配置最大高度和纵向滚动规则，兼顾少行数居中、多行数滚动的需求：

1. 给表格的父级容器（如果表格直接放在body下就给body加）配置flex居中样式，让内部的表格容器始终保持水平+垂直居中
2. 新增独立的表格包裹层，设置和视口挂钩的最大高度，配置超出后自动显示纵向滚动条，把原有卡片的背景、圆角、阴影样式移到这个包裹层上
3. 修正所有拼写、类名大小写不匹配的问题，让table宽度撑满包裹层即可

修正后代码 #

CSS部分 #

/* 表格父容器，以body为例，可替换为实际的页面容器 */
body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  box-sizing: border-box;
}

/* 表格滚动包裹层，承载原卡片样式和滚动逻辑 */
.table-card {
  background-color: white;
  border-radius: 10px;
  padding: 40px 30px 30px 30px;
  width: 750px;
  /* 最大高度预留上下padding空间，避免贴住视口边缘 */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: 5px 10px 10px rgba(2, 128, 144, 0.2);
  transition: transform 300ms, box-shadow 300ms;
}

/* 表格本身撑满容器宽度 */
.toAlignTable {
  width: 100%;
  border-collapse: collapse;
}

HTML部分 #

<div class="table-card">
  <table class="highlight centered responsive-table toAlignTable" >
    <thead>
    <tr>
        <th style="border-top-left-radius: 10px;">S.No.</th>
        <th>Account name</th>
        <th style="border-top-right-radius: 10px;">Login</th>
    </tr>
    </thead>
    <tbody id="searchResultsBody"  style="font-size: 120%;">

    </tbody>
  </table>
</div>

<template id="populateTemplate">
    <tr style="font-weight: 180;height:auto;">
        <td style="background-color: #c5cbce;" class="s_num"  scope="row"></td>
        <td style="background-color: #dddddd;" class="collection_acc" scope="row"></td>
        <td><button class="waves-effect waves-light roundeed blue-grey btn access_btn">access</button></td>
    </tr>
</template>

JS动态渲染逻辑不需要做任何修改，保持原有代码即可。

效果说明 #

• 表格行数在15行以内、总高度小于视口最大高度时，卡片会自动保持在屏幕居中位置，和之前的正常显示效果完全一致
• 表格行数增多、总高度超过视口最大限制时，卡片不会溢出视口，自动出现纵向滚动条，所有内容都可以滚动查看，不会出现顶部/底部内容被截断的问题

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