html - 使内联表格间距与页面成比例

Question

有没有办法让多个表格在页面上以等间隔的方式排列？

这是我希望我的页面的样子:

<table class="auto-style4" border="0"  cellspacing="0">
      <tr>
        <td style="width:7%" align="right">table 1, cell 1</td>     
        <td style="width:7%" >table 1, cell 2</td>
        <td style="width:7%" align="right">TABLE 2, CELL 1</td>     
        <td style="width:7%" >TABLE 2, CELL 2</td>
      </tr>
    </table>

https://www.w3schools.com/code/tryit.asp?filename=FLDD6QZ6DCV0

但我的问题是我需要它们是单独的表格，因为页面如何与网站的其他部分交互。

这是我能够用单独的表复制它的最接近结果:https://www.w3schools.com/code/tryit.asp?filename=FLDD5NFMYBL7

但问题是它将两列居中放置在页面中间，而不是像第一个示例那样在页面上将它们均匀隔开(这正是我想要的。)

所以，我的问题是:一般来说，有没有办法像第一个示例那样制作在页面上均匀分布的单独内联表？

谢谢!

Answer 1

这是您想要实现的目标吗？如果是，那么我会添加一些解释。

table{
  display:inline-block;
  margin: 0 10px;
  border:1px solid #000;
}
.container{
  display:flex;
  align-items:center;
  justify-content:space-around;
}

<div class="container">
  <table>
    <tr>
      <td>Table 1 Item 1</td>
      <td>Table 1 Item 2</td>
      <td>Table 1 Item 3</td>
      <td>Table 1 Item 4</td>
    </tr>
  </table>
  <table>
    <tr>
      <td>Table 2 Item 1</td>
      <td>Table 2 Item 2</td>
      <td>Table 2 Item 3</td>
      <td>Table 2 Item 4</td>
    </tr>
  </table>
</div>