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>

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

1 个答案: