如何在HTML/CSS中将table2定位到table1下方？含居中宽大于table2场景

Got it，这两个表格定位的问题我经常碰到，给你分两种情况拆解：

其实HTML里的<table>标签默认是块级元素，正常情况下两个table会自动上下排列，根本不需要额外的CSS。比如你直接写：

<table id="table1">
  <tr><td>Table 1 内容</td></tr>
</table>
<table id="table2">
  <tr><td>Table 2 内容</td></tr>
</table>

如果你的table没有自动上下排，大概率是之前给table加了float浮动属性，这时候只需要给table2加上clear: both清除浮动就行：

#table2 {
  clear: both;
}

这种情况一般是table1用margin: 0 auto实现了居中，且宽度比table2宽，想要table2要么和table1左边缘对齐，要么保持和table1同中心的居中状态，这里给你两种实用方案：

方案一：用容器包裹，统一控制位置 #

最稳妥的方法是把两个表格放进一个容器里，让容器居中，宽度和table1一致。这样table2在容器里会自动和table1的左边缘对齐，完美叠在下方：

<div class="table-wrapper">
  <table id="table1">
    <tr><td>这是宽度更大的居中表格</td></tr>
  </table>
  <table id="table2">
    <tr><td>这是宽度较小的表格</td></tr>
  </table>
</div>

.table-wrapper {
  width: 600px; /* 和table1的宽度保持一致 */
  margin: 0 auto; /* 让容器整体居中 */
}
#table1 {
  width: 100%; /* 占满容器宽度 */
  margin-bottom: 10px; /* 可选：给两个表格加个间距 */
}

方案二：用CSS计算margin，不用额外容器 #

如果不想加容器，也可以通过计算table2的左margin来对齐table1的左边缘。假设table1宽度是600px，table2宽度是300px，那table2的左margin应该等于页面的左右留白宽度：

#table1 {
  width: 600px;
  margin: 0 auto;
}
#table2 {
  width: 300px;
  /* 计算左margin：(页面宽度 - table1宽度)/2 */
  margin-left: calc((100% - 600px)/2);
  margin-top: 10px; /* 可选：加间距 */
}

如果只是想让table2和table1一样居中显示，那直接给table2也加margin: 0 auto就行，它会自动和table1的中心对齐~

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