如何并排居中对齐两个表格？答案

【问题标题】：How to center align two table side by side?如何并排居中对齐两个表格？
【发布时间】：2023-01-29 22:48:46
【问题描述】：

我似乎无法在 html 中居中对齐 2 个内嵌表格。

我的 sn-p 代码：

<div class="sometables" style="margin-left: auto; margin-right: auto;">
    <table style="display:inline-table;float:left;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;float:left;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>

当前输出是：

如何将两个表居中对齐？

研究和尽职调查：

【问题讨论】：

不能运行这个，也许 .sometables { display: grid; place-items: center; width: 100% /* not sure */ } 适合你？内联的“margin-right: 230px”是什么？这会扰乱您的左/右定位...
@RenevanderLende 我是 HTML 的新手 - 我想要两个并排的表格，中间有一些间距......你能给我任何建议吗？！
你显然在使用一些预处理器，所以我不能运行你的代码，但是简单的经验法则将是：拉紧父元素 (.sometables) 为全宽（<body> 或其他父元素）和中央它的子内容（你的两个表）。因此我之前的评论。边距是绝不子元素总宽度的一部分，导致在父元素内产生不必要的额外移动。对于使用 display: grid 时的子间距，请在父定义（例如 .sometables { column-gap: 2em }）中为 column-gap（或简写 gap）使用方便的值。删除内联margin
@RenevanderLende 我正在使用 Python 的 Flask Env。创建绑定到本地数据库的网站。具有这么多活动部件的 MWE 很难重现。你能分享代码的sn-p吗？？那段代码会是什么样子？

标签： html css

【解决方案1】：

根据 OP 对代码的请求，未检查，因为它无法在运行时执行。

删除对内联 margin 的引用并创建一个基本的 CSS 网格父级 .sometables，它被拉伸以填充其父级（假设为 body）并在两个子元素（table）与 column-gap 之间添加一些方便的间距（任何首选值都可以）。

注意删除margin定义...

更新CSS 网格需要一个 grid-template-columns 定义来并排显示表格，而不是堆叠在一起。每个表获得可用总空间的1fr（一小部分）。

请务必访问Grid by Example，非常值得您花时间。

.sometables {
  /* CSS Grid settings */
  display: grid; place-items: center;
  grid-template-columns: 1fr 1fr;
  column-gap: 2em;
  
  width: 100%; /* to fill full width of parent */
}

<div class="sometables">
    <table style="display:inline-table;float:left;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;float:left;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>

【讨论】：

如果我想将 <th>Application<br>Flagged</th> 转换为 <th style="width:200px">Application<br>Flagged</th> 的任何指针 - 我似乎无法在第一列上强制 200px ...
请改用min-width。无论如何，您在使用这些表格时可能会遇到麻烦，因为它们被定义为 width 30%，但很可能是因为在浏览器调整大小时，30% 的宽度不足以容纳单行的总宽度。然后你将不得不决定是缩小整个表，还是使用不同的方法，比如弹性盒子或者CSS网格.顺便说一句，我删除了“方便...”因为 width: 30% 不会发生这种情况。 CSS 将继续尝试将每个表格容纳在 30% 的空间中，无论它变得多么狭窄。