html - 将两个表居中，添加间隙并保持 HTML 对齐

Question

我试图让下面的 HTML 代码在页面中央显示两个表格，它们之间的空间稍大，并且顶部垂直对齐，因为它们可能没有每个表格中的行数，所以我想要他们。

我已经设法让它顶部对齐，但我似乎无法让它们在页面上居中。任何帮助，将不胜感激。

<style>
  html,
  body {
    height: 100%;
  }
  #tbl1 {
    height: 100%;
    width: 100%;
    display: table;
  }
  #tbl2 {
    vertical-align: top;
    display: table-cell;
    height: 100%;
  }
  #mytbl {
    display: inline-table;
    margin: 0 auto;
  }
</style>
<div id="tbl1">
  <div id="tbl2">
    <table id="mytbl" border="1">
      <tr>
        <th style="font-size:25px" colspan="4" align="center" valign="middle">TN Staff</th>
      </tr>
      <tr>
        <th style="font-size:20px">Name</th>
        <th style="font-size:20px">Job Title</th>
        <th style="font-size:20px">Office</th>
        <th style="font-size:20px">Cell</th>
      </tr>
      <tr>
        <td><strong>John Smith</strong>
        </td>
        <td>Director of Operations</td>
        <td align="center">123-555-4567</td>
        <td align="center">123-555-0123</td>
      </tr>
    </table>
    <table id="mytbl" border="1">
      <tr>
        <th style="font-size:25px" colspan="4" align="center" valign="middle">VA Staff</th>
      </tr>
      <tr>
        <th style="font-size:20px">Name</th>
        <th style="font-size:20px">Job Title</th>
        <th style="font-size:20px">Office</th>
        <th style="font-size:20px">Cell</th>
      </tr>
      <tr>
        <td><strong>Jane Doe</strong>
        </td>
        <td>Director of Operations</td>
        <td align="center">321-555-7654</td>
        <td align="center">321-555-3210</td>
      </tr>
    </table>
  </div>
</div>

Answer 1

确保你添加了这个

#tbl2{
  text-align: center;
}

#mytbl{
  margin: 20px 0;
}

完整代码如下:

 html,
 body {
   height: 100%;
 }
 #tbl1 {
   height: 100%;
   width: 100%;
   display: table;
 }
 #tbl2 {
   vertical-align: top;
   text-align: center;
   display: table-cell;
   height: 100%;
 }
 #mytbl {
   display: inline-table;
   margin: 20px 0;
   ;
 }

<div id="tbl1">
  <div id="tbl2">
    <table id="mytbl" border="1">
      <tr>
        <th style="font-size:25px" colspan="4" align="center" valign="middle">TN Staff</th>
      </tr>
      <tr>
        <th style="font-size:20px">Name</th>
        <th style="font-size:20px">Job Title</th>
        <th style="font-size:20px">Office</th>
        <th style="font-size:20px">Cell</th>
      </tr>
      <tr>
        <td><strong>John Smith</strong>
        </td>
        <td>Director of Operations</td>
        <td align="center">123-555-4567</td>
        <td align="center">123-555-0123</td>
      </tr>
    </table>
    <br>
    <table id="mytbl" border="1">
      <tr>
        <th style="font-size:25px" colspan="4" align="center" valign="middle">VA Staff</th>
      </tr>
      <tr>
        <th style="font-size:20px">Name</th>
        <th style="font-size:20px">Job Title</th>
        <th style="font-size:20px">Office</th>
        <th style="font-size:20px">Cell</th>
      </tr>
      <tr>
        <td><strong>Jane Doe</strong>
        </td>
        <td>Director of Operations</td>
        <td align="center">321-555-7654</td>
        <td align="center">321-555-3210</td>
      </tr>
    </table>
  </div>
</div>

建议:不要使用内联样式，也不要将您的样式与您的 html 代码放在同一个文档中。使用 .css 文档来放置所有样式，并将其添加到您的 html 文档中(在 head 中):

<link rel="stylesheet" type="text/css" href="styles.css" media="all">