用 display: flex 是让两个 table 并排最推荐的方式：父容器设 display: flex，配合 gap 控制间距，支持响应式堆叠；避免 float、inline-block 等过时或易出错方案。
HTML 中两个 <table> 元素默认不水平排列
<p>浏览器会把每个 <code><table> 当作块级元素，天然换行。想让它们并排，得主动打破这个默认行为。
<p>最直接有效的方式是用 CSS 控制布局，而不是改 HTML 结构。别试图靠 <code><table><tr><td> 套嵌来“假装”是两个表——语义错、维护难、响应式崩溃。
<ul>
<li>避免用 <code>float: left：老方案，父容器需要清除浮动，且在现代布局中已过时
display: inline-block：容易因换行符或空格产生意外间隙，还得处理 vertical-align 对齐问题display: flex 父容器 —— 简洁、可控、兼容性足够（IE10+）用 flex 让两个 <table> 并排的最小可行写法
<p>给两个表格套一个父容器（比如 <code><div>），对它设 <code>display: flex，其余交给浏览器对齐逻辑。
<div style="display: flex; gap: 16px;">
<table>...</table>
<table>...</table>
</div>
-
gap 比 margin 更干净：它只作用于 flex 项之间，不会影响内外边距逻辑
- 如果表格高度不一致，默认顶部对齐；加
align-items: flex-start 可强制顶对齐
- 移动端想堆叠？加媒体查询：
@media (max-width: 768px) { div { flex-direction: column; } }
为什么不用 display: grid？
gap 比 margin 更干净：它只作用于 flex 项之间，不会影响内外边距逻辑align-items: flex-start 可强制顶对齐@media (max-width: 768px) { div { flex-direction: column; } }
display: grid？能用，但小题大做。两个表格并排是典型的一维布局，flex 天然匹配；grid 更适合二维控制（比如表格内部格子 + 外部并排同时干预）。
立即学习“前端免费学习笔记（深入）”；
- 用
grid写两列：要设grid-template-columns: 1fr 1fr，多一层抽象 - 当其中一个表格内容变长、撑宽后，
flex会自然按内容分配空间，grid则可能需手动调列宽 - 调试时
flex的 DevTools 面板更直观，属性少、反馈快
表格本身宽度失控怎么办
并排后发现表格溢出容器、横向滚动、或挤成一团？大概率是表格没管好自身宽度策略。
- 给
<table> 加 <code>table-layout: fixed：让列宽由第一行<th>/</th> <td> 或 <code>width属性决定，不随内容撑开 - 禁用默认缩放：
td, th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - 慎用
width: 100%：它会让表格强行填满父容器，可能压扁列；优先用min-width或max-width
真正麻烦的不是怎么排成一行，而是排完之后内容是否可读、是否随窗口缩放、是否在不同设备上保持可用。这些细节比“怎么并排”更消耗时间。
