如何让HTML中两个并排的表格实现居中对齐？

你的代码里导致无法居中的核心问题有两个：

1. 父容器.sometables没有设置有效宽度，margin: auto仅在容器有明确宽度时才能触发居中效果
2. 表格添加了float:left，这会让表格脱离正常文档流，父容器无法正确包裹它们，自然没法实现整体居中

下面提供两种可行的修复方案：

方案一：使用Flex布局（推荐，简洁现代） #

利用Flex布局直接实现水平居中，同时用gap控制表格间距，无需依赖float和margin-right：

<div class="sometables" style="display: flex; justify-content: center; gap: 230px;">
    <table style="display:inline-table; width:30%;">
      <tr>               
        <th>Application<br>Processed</th>
        <th>Application<br>ID</th>
        <th>Last Name</th>
        <th>First Name</th>
      </tr>
  
      {% for processed in processed_data %}
      <tr>
        <td>{{processed[0]}}</td>
        <td>{{processed[3]}}</td>
        <td>{{processed[1]}}</td> 
        <td>{{processed[2]}}</td>
      </tr>
      {% endfor %}   
    </table>
    <table style="display:inline-table; width:30%;">
      <tr>
        <th>Application<br>Flagged</th>
        <th>Application<br>ID</th>
        <th>Last Name</th>
        <th>First Name</th>
      </tr>
 
      {% for flagged in flagged_data %}
      <tr>
        <td>{{flagged[0]}}</td>
        <td>{{flagged[3]}}</td>
        <td>{{flagged[1]}}</td> 
        <td>{{flagged[2]}}</td>
      </tr>
      {% endfor %}   
    </table>
</div>

方案二：传统inline-table布局调整 #

给父容器设置自适应宽度，移除表格的float:left，通过margin:auto和text-align:center实现居中：

<div class="sometables" style="margin-left: auto; margin-right: auto; width: fit-content; text-align: center;">
    <table style="display:inline-table; width:30%; margin-right:230px;">
      <tr>               
        <th>Application<br>Processed</th>
        <th>Application<br>ID</th>
        <th>Last Name</th>
        <th>First Name</th>
      </tr>
  
      {% for processed in processed_data %}
      <tr>
        <td>{{processed[0]}}</td>
        <td>{{processed[3]}}</td>
        <td>{{processed[1]}}</td> 
        <td>{{processed[2]}}</td>
      </tr>
      {% endfor %}   
    </table>
    <table style="display:inline-table; width:30%;">
      <tr>
        <th>Application<br>Flagged</th>
        <th>Application<br>ID</th>
        <th>Last Name</th>
        <th>First Name</th>
      </tr>
 
      {% for flagged in flagged_data %}
      <tr>
        <td>{{flagged[0]}}</td>
        <td>{{flagged[3]}}</td>
        <td>{{flagged[1]}}</td> 
        <td>{{flagged[2]}}</td>
      </tr>
      {% endfor %}   
    </table>
</div>

说明 #

• Flex方案中，justify-content: center直接让子元素在父容器内水平居中，gap属性用来设置两个表格之间的间距，比margin-right更易维护
• 传统方案中，width: fit-content让父容器宽度刚好包裹两个表格的总宽度，再通过margin: auto实现整体居中，text-align: center确保inline-table元素在容器内对齐

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