什么是正确的 CSS 样式来水平对齐这些表格并使它们响应？

Question

我是 CSS 的新手，我不知道正确的 CSS 属性是什么将 table 移动到我想要的地方.

我尝试使用 float: right 属性但 table 移到了右下角。

抱歉我的英语不好:)

Answer 1

您可以将这 3 个表保存在一个父表中 div 并使其成为 display:flex

<div style="display: flex; justify-content: space-between">
  <div>
    Table 1
  </div>
  <div>
    Table 2
  </div>
  <div>
    Table 3
  </div>  
</div>

参考这个：https://www.w3schools.com/css/css3_flexbox.asp

Answer 2

试试这个：

   div .table-center {
          display:flex;
          align-items: center;
          justify-content: center;
    }

   div .table-right {
          display:flex;
          align-items: end;
          justify-content: end;
    }

Answer 3

将所有三个 table 嵌套在单个父项 wrapper 中并将其设置为 display: flex;。然后，您可以根据个人喜好使用 justify-content: space-around; 或 space-between。

一行中的所有 table。然后你可以在每个 table 上设置一个 width。我喜欢做一个 calc 宽度，这样它总是适合我想要的物品。然后我添加了左右 margin 的 1em，以便 table 相应地间隔开。

table 几乎没有响应，所以我建议为媒体屏幕加入一些 media-queries。使其在媒体屏幕上响应的示例是添加媒体查询，将 flex 更改为 flex-direction: column;.

table,
th,
td {
  border: 1px solid black;
}

.wrapper {
  display: flex;
  justify-content: space-around;
}

table {
  width: calc(100% / 3);
  margin: 0 1em;
}

@media only screen and (max-width: 800px) {
  .wrapper {
    flex-direction: column;
  }
  table {
    width: 100%;
    margin: 1em 0;
}

<div class="wrapper">
  <table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
  </table>

  <table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
  </table>

  <table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
  </table>
</div>

什么是正确的 CSS 样式来水平对齐这些表格并使它们响应？

What the correct CSS styles to align these tables horizontally and make them responsive?

html

css

flexbox