用 display: inline-block 是最轻量且兼容 IE8+ 的并排方案，需同时设置两个表格为 inline-block 和 vertical-align: top，并处理空格间隙与宽度。
用 display: inline-block 让两个表格并排
直接给两个 <table> 加 <code>display: inline-block，再用 vertical-align: top 对齐顶部，是最轻量、兼容性最好（IE8+）的做法。不用 Flex 或 Grid，避免老项目出问题。
- 必须给两个表格都设
display: inline-block，只设一个没用 - 默认
vertical-align是baseline，会导致底部对齐错位，显式写top更稳 - 元素间有空格或换行，会生成 4px 左右间隙，解决方法二选一：
font-size: 0在父容器上，或删掉 HTML 中的换行/空格 - 记得设
width，否则表格可能撑满整行，失去“左右”效果
<div style="font-size: 0;"> <table style="display: inline-block; vertical-align: top; width: 48%;">...</table> <table style="display: inline-block; vertical-align: top; width: 48%;">...</table> </div>
Flex 布局更可控但需注意父容器高度
用 display: flex 是现代写法，对齐、间距、换行都更直观，但要注意：如果父容器没设高度，且子表格内容少，flex 容器可能塌缩，导致视觉上“没显示出来”。
- 父容器必须设
display: flex，子表格不用额外样式（除非要等宽） - 加
gap: 10px控制间距，比手动 margin 清晰 - 用
flex: 1让两个表格等宽自适应，或用width固定比例（如flex: 0 0 60%） - IE10+ 支持部分 Flex，但
gap不支持，得回退到margin
<div style="display: flex; gap: 12px;"> <table style="flex: 1">...</table> <table style="flex: 1">...</table> </div>
float 布局还能用，但必须清除浮动
虽然过时，但某些遗留系统里还在用 float。它不依赖父容器 display 类型，但漏掉清除浮动就会导致后续内容上移，这是最常踩的坑。
- 两个表格分别加
float: left，并设明确width（比如49%留点间隔） - 父容器末尾必须加清除元素：
<div style="clear: both"></div>，或用伪元素::after - 浮动元素脱离文档流，父容器高度为 0 —— 所以清除浮动不是“可选”，是“必须”
- 不推荐新项目用，但维护老代码时看到
float别急着删，先看清除逻辑在不在
不要用 position: absolute 并排表格
有人试过给两个表格都设 position: absolute，靠 left 和 right 拉开，结果表格重叠、响应式失效、内容溢出不可控——这不是并排，是覆盖。
立即学习“前端免费学习笔记（深入）”；
-
absolute脱离布局流，父容器无法感知尺寸，打印、缩放、屏幕阅读器都会出问题 - 宽度和位置全靠手算像素，表格内容变多就撑破边界
- 没有 z-index 控制时，后写的表格反而盖在前面表格上
- 唯一适用场景：做悬浮工具栏或遮罩层，不是常规并排需求
