Question

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

我设法让它排在最前面，但我似乎无法让它们集中在页面上。任何帮助，将不胜感激。

＆＃13;

<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>

＆＃13;

Answer 1

确保添加此

#tbl2{
  text-align: center;
}

#mytbl{
  margin: 20px 0;
}

这里是完整的代码：

＆＃13;

 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;
   ;
 }

＆＃13;

<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>

＆＃13;

建议：不要使用内联样式，也不要将样式放在与html代码相同的文档中。使用.css文档放置所有样式，然后将其添加到html文档中（在头部）：

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

Answer 2

试试这个：

<style>
    html, body {
    height: 100%;
}
    #tbl1 {
        display: table;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    width: 960px;
}
    #tbl2 {
    vertical-align: top;
    display: table-cell;
    height: 100%;
}
    #mytbl {
    display: inline-table;
    margin: 0 auto 0 20px;
}
</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>

这是一个测试：http://jsfiddle.net/on0xmmhq/

希望这能帮到你

中心两个表，添加差距，并保持对齐的HTML

2 个答案: