如何实现一个HTML表格页面居中，另一个在其右侧边距内居中？

问题分析 #

核心需求：myTable 在网页整体居中，keypadTable 紧贴其右侧，两者并排显示。
当前代码存在两个关键问题：

• 错误使用 float:center：CSS 的 float 属性仅支持 left/right/none 三个取值，center 为无效设置，导致表格无法按预期居中。
• 浮动导致 margin:auto 失效：myTable 设置 float 后脱离文档流，margin-left:auto; margin-right:auto 无法生效，无法实现居中。

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

通过父容器包裹两个表格，实现整体居中+并排排列：

<!-- 父容器：控制整体居中及表格排列 -->
<div style="width: 1334px; /* 1014px(myTable宽度) + 300px(keypadTable宽度) + 20px(间距)，可按需调整 */
            margin: 0 auto; /* 让容器在页面整体居中 */
            display: flex;
            gap: 10px; /* 两个表格之间的间距 */">
  <!-- 主表格：居中显示 -->
  <table id="mytable" style="width: 1014px; height: 341px; 
                            background-color: rgb(204, 204, 204); 
                            border: 1px solid black; 
                            cellpadding: 5; cellspacing: 5;">
    <!-- 这里添加myTable的内容 -->
  </table>
  <!-- 右侧小表格：紧贴主表格右侧 -->
  <table id="keypadTable" style="width: 300px; height: 341px; 
                                background-color: rgb(204, 204, 204); 
                                border: 1px solid black; 
                                cellpadding: 5; cellspacing: 5;">
    <tbody align="center"> </tbody>
  </table>
</div>

兼容旧浏览器方案（使用 inline-block） #

如果需要兼容不支持 Flex 的旧浏览器，可改用 inline-block 实现：

<div style="width: 1334px; margin: 0 auto; text-align: center;">
  <table id="mytable" style="display: inline-block; width: 1014px; height: 341px; 
                            background-color: rgb(204, 204, 204); 
                            border: 1px solid black; 
                            cellpadding: 5; cellspacing: 5; 
                            vertical-align: top;">
    <!-- 这里添加myTable的内容 -->
  </table>
  <table id="keypadTable" style="display: inline-block; width: 300px; height: 341px; 
                                background-color: rgb(204, 204, 204); 
                                border: 1px solid black; 
                                cellpadding: 5; cellspacing: 5; 
                                vertical-align: top; 
                                margin-left: 10px;">
    <tbody align="center"> </tbody>
  </table>
</div>

关键修改说明 #

1. 移除 myTable 中无效的 float:center 设置。
2. 通过父容器的 margin:0 auto 实现整体居中，避免浮动元素脱离文档流的问题。
3. 用 Flex/inline-block 替代浮动，确保两个表格稳定并排且顶部对齐。

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