如何让表格内容适配父级div容器并实现滚动展示

1. 修复HTML拼写错误 #

你现有代码中表格容器的class属性拼写错误，导致对应CSS完全不生效，先做修改：
将<div clas="table-container">更正为<div class="table-container">

2. 调整对应CSS样式 #

修改.content类 #

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* 替换原无效的justify-content: center，避免内容被挤压溢出 */
  /* 删除无效的position: center属性 */
  height: 80vh;
  padding: 25px;
  background-color: #fff;
  border-radius: 25px;
  box-shadow: 1px 1px 3px black;
  overflow: hidden; /* 新增，避免内部内容超出白色卡片边界 */
}

修改.table-container类 #

.table-container {
    width: 100%;
    flex: 1; /* 新增，自动填充content的剩余可用高度 */
    /* 删除原height: 80vh配置，父容器本身只有80vh且带内边距，子容器设相同高度必然溢出 */
    overflow: auto; /* 自动识别内容溢出，同时支持横向+纵向滚动 */
    padding: 16px; /* 把原50px内边距调小，避免横向撑满溢出，可根据视觉需求调整 */
}

修改.vm-table及单元格样式 #

.vm-table {
    /* 删除原height: 100%配置，避免行数少的时候表格被强行拉伸变形 */
    min-width: 800px; /* 可根据你的列宽需求调整，保证每列内容不会被强制压缩 */
    border-collapse: collapse; /* 合并表格边框，展示更美观 */
}
/* 可选补充：优化单元格展示效果 */
.vm-th, .vm-td {
    padding: 8px 12px;
    white-space: nowrap; /* 禁止单元格内容自动换行，保证表格整齐 */
}

最终效果 #

• 表格不会超出.content的白色卡片边界
• 表格宽度超过容器时自动出现横向滚动条，高度超过容器时自动出现纵向滚动条
• 所有表格内容不会被裁剪，滚动即可查看完整信息

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