如何将 3 个 html 表格并排对齐到中心

Posted 2023-03-29

【中文标题】如何将 3 个 html 表格并排对齐到中心

【英文标题】：How to align 3 html tables to center, side by side

【发布时间】：2016-07-10 09:42:40

【问题描述】：

我在 html 中有以下代码，我需要将它们放在页面中心。

我尝试将每个表对齐到中心，但没有成功。我正在使用与中心对齐的 div 标签，但表格仍然没有居中。请帮忙

<div align="center">
<table border='1' style="border-color: white;float:left; width:25%">
<tr>
    <th colspan="2">Row 1</td>        
</tr>
<tr>
    <td>Row 2</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 3</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 4</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 5</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 6</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 7</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 8</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 9</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 10</td>
    <td>Dummy Data</td>
</tr>
</table>
<table border='1' style="border-color: white;float:left; width:25%">
<tr>
    <th colspan="2">Row 1</td>        
</tr>
<tr>
    <td>Row 2</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 3</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 4</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 5</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 6</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 7</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 8</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 9</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 10</td>
    <td>Dummy Data</td>
</tr>
</table>
<table border='1' style="border-color: white;float:left; width:25%">
<tr>
    <th colspan="2">Row 1</td>

</tr>
<tr>
    <td>Row 2</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 3</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 4</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 5</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 6</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 7</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 8</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 9</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 10</td>
    <td>Dummy Data</td>
</tr>
</table>
</div>

【问题讨论】：

什么样的中心，中心是指grid？

表示以这样的方式填充页面，其中页面的前 12.5% 为空白，接下来为 table1 的 25%，接下来为 table 2 的 25%，接下来为 table 3，其余 12.5% 再次空白。

【参考方案1】：

您可以使用flex box 方法，例如：

.center
  display:flex;
  justify-content:center

<div class="center">
<table border='1' class="table" style="border-color: white;float:left; width:25%">
<tr>
    <th colspan="2">Row 1</td>        
</tr>
<tr>
    <td>Row 2</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 3</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 4</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 5</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 6</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 7</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 8</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 9</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 10</td>
    <td>Dummy Data</td>
</tr>
</table>
<table id="mainTable2" border='1' class="table" style="border-color: white;float:left; width:25%">
<tr>
    <th colspan="2">Row 1</td>        
</tr>
<tr>
    <td>Row 2</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 3</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 4</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 5</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 6</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 7</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 8</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 9</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 10</td>
    <td>Dummy Data</td>
</tr>
</table>
<table id="mainTable3" border='1' class="table" style="border-color: white;float:left; width:25%">
<tr>
    <th colspan="2">Row 1</td>

</tr>
<tr>
    <td>Row 2</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 3</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 4</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 5</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 6</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 7</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 8</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 9</td>
    <td>Dummy Data</td>
</tr>
<tr>
    <td>Row 10</td>
    <td>Dummy Data</td>
</tr>
</table>
</div>