Question

我读了两个有关如何并排放置2张桌子的话题，但我不知道如何将它们移到中心位置

    <div>
        <table style="float: left;margin-right:10%;">
            <tr>
                <td>abc</td>
            </tr>
        </table style="float: left">
        <table>
            <tr>
                <td>xyz</td>
            </tr>
        </table>
    </div>

对不起，我英语不好。

Answer 1

您可以在容器div上使用flexbox，应用justify-content: center;将其居中，删除浮点，并在其中一张表上使用边距在它们之间建立距离。

.wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

table {
  border: 1px solid #555;
}

<div class="wrap">
        <table style="margin-right:10%;">
            <tr>
                <td>abc</td>
            </tr>
        </table>
        <table>
            <tr>
                <td>xyz</td>
            </tr>
            <tr>
                <td>xyz</td>
            </tr>
            <tr>
                <td>xyz</td>
            </tr>
        </table>
    </div>

Answer 2

使用弹性框。

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

table {
  background: red;
}

    <div class=container>
        <table style="float: left;margin-right:10%;">
            <tr>
                <td>abc</td>
            </tr>
        </table style="float: left">
        <table>
            <tr>
                <td>xyz</td>
            </tr>
            <tr>
                <td>xyz</td>
            </tr>
            <tr>
                <td>xyz</td>
            </tr>
            <tr>
                <td>xyz</td>
            </tr>
            <tr>
                <td>xyz</td>
            </tr>
        </table>
    </div>

Answer 3

是。

 <div  style="display:flex;justify-content:center; align-items:center">
        <table style="float: left;margin-right:10%;">
            <tr>
                <td>abc</td>
            </tr>
        </table>
        <table>
            <tr>
                <td>xyz</td>
            </tr>
        </table>
    </div>

在此处输入代码

Answer 4

您应该考虑使用一张有一行和两列的表。如果它不符合您的要求，则可以通过以下几种方法进行：

使用弹性盒（推荐）

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

table {
  width: 100%;
  border: 1px solid #000;
  text-align: center;
}

table:first-child {
  margin-right: 10px;
}

<div class="wrapper">
  <table id="table-one">
    <thead>
      <tr>
        <th>Table 1 - Column 1</th>
        <th>Table 1 - Column 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>first</td>
        <td>second</td>
      </tr>
    </tbody>
  </table>
  <table id="table-two">
    <thead>
      <tr>
        <th>Table 2 - Column 1</th>
        <th>Table 2 - Column 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>first</td>
        <td>second</td>
      </tr>
    </tbody>
  </table>
</div>

使用内联块

table {
  display: inline-block;
  border: 1px solid #000;
  text-align: center;
}

table:first-child {
  margin-right: 10px;
}

<div class="wrapper">
  <table id="table-one">
    <thead>
      <tr>
        <th>Table 1 - Column 1</th>
        <th>Table 1 - Column 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>first</td>
        <td>second</td>
      </tr>
    </tbody>
  </table>
  <table id="table-two">
    <thead>
      <tr>
        <th>Table 2 - Column 1</th>
        <th>Table 2 - Column 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>first</td>
        <td>second</td>
      </tr>
    </tbody>
  </table>
</div>

以此类推...

HTML，CSS —如何将两个表并排水平居中

4 个答案: