Javascript 如何在移动视图中使表格垂直对齐？

我的桌子在桌面视图上水平排列，分辨率为1920和1280，当我将屏幕分辨率更改为移动版本时，桌子会变得杂乱无章，相互重叠，我希望它垂直排列，例如每行1张桌子中心对齐。如何做到这一点？ 我已经把水平对齐的代码放在桌面版本中了

<代码>@媒体屏幕和（最小宽度：1000px）{ .桌上容器{ 浮动：左； 宽度：15%； } .表容器：类型的第一个{ 宽度：40%； } } .table_容器{ 浮动：左； 宽度：25%； } .容器：：之后{ 内容：“； 明确：两者皆有； 显示：表格； } 桌子{ 保证金：0自动； 边界半径：10px； } tr{ 填充：15px； 文本对齐：居中； } 运输署{ 颜色：黑色； 文本对齐：居中； 垂直对齐：中间对齐； 边框：1倍白色； 高度：50px； 背景颜色：灰色； 宽度：272px； } .sub_文本{ 字体大小：12px； 字体：斜体； 颜色：#0071ce； 字号：100； } th{ 背景色：黑色； 文本对齐：居中； 填充：10px； 边框左上半径：10px； 边框右上角半径：10px； 颜色：白色； 字体大小：粗体； 高度：70像素； } .标题{ 颜色：#0071ce； 字体大小：粗体； 填充：10px； } .包装纸{ 文本对齐：居中； 边缘顶部：20px； } 表tr：最后一个孩子td：第一个孩子{ 边框左下半径：10px； } 表tr:last child td:last child{ 边框右下半径：10px }

成本
您每两周工资的成本

显示无烟率
仅限emp
emp+配偶/合伙人
emp+儿童（ren）
emp+系列
组织的年度最大贡献

仅限emp
emp+相关
年度免赔额

网络护理
仅限emp
emp+相关
表B
A.
B
C
D
E
F
G
H
表B
A.
B
C
D
E
F
G
H
表B
A.
B
C
D
E
F
G
H

您已经在

媒体查询中使用了有效的解决方案。对于小于或等于
600px
的屏幕添加此选项

@media screen and (max-width: 600px) {
  .tables {
    display: flex;
    flex-direction: column;
  }
  .table_container {
    width: 100%;
  }
}

不要忘记添加此选项以启用媒体查询

：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

成本
您每两周工资的成本

显示无烟率
仅限emp
emp+配偶/合伙人
emp+儿童（ren）
emp+系列
组织的年度最大贡献

仅限emp
emp+相关
年度免赔额

网络护理
仅限emp
emp+相关
表B
A.
B
C
D
E
F
G
H
表B
A.
B
C
D
E
F
G
H
表B
A.
B
C
D
E
F
G
H

我更愿意使用CSS网格进行此操作。