两个HTML表并排,以页面为中心

Question

我在页面上有两个表,我想要并排显示,然后将它们放在页面中(实际上在另一个div中,但这是我能想到的最简单的):

<style>
  #outer { text-align: center; }
  #inner { text-align: left; margin: 0 auto; }
  .t { float: left; }
  table { border: 1px solid black; }
  #clearit { clear: left; }
</style>

<div id="outer">
  <p>Two tables, side by side, centered together within the page.</p>

  <div id="inner">
    <div class="t">
      <table>
        <tr><th>a</th><th>b</th></tr>
        <tr><td>1</td><td>2</td></tr>
        <tr><td>4</td><td>9</td></tr>
        <tr><td>16</td><td>25</td></tr>
      </table>
    </div>

    <div class="t">
      <table>
        <tr><th>a</th><th>b</th><th>c</th></tr>
        <tr><td>1</td><td>2</td><td>2</td></tr>
        <tr><td>3</td><td>5</td><td>15</td></tr>
        <tr><td>8</td><td>13</td><td>104</td></tr>
      </table>
    </div>

  </div>
  <div id="clearit">all done.</div>
</div>

我知道这与表格浮动这一事实有关,但我不知道自己错过了什么.有许多网页描述了我在这里展示的技术,但无论如何它都不起作用; 桌子固执地靠在左边缘.

Answer 1

不幸的是,所有这些解决方案都依赖于指定固定宽度.由于表是动态生成的(从数据库中提取统计结果),因此无法预先知道宽度.

通过将两个表包装在另一个表中可以实现所需的结果:

<table align="center"><tr><td>
//code for table on the left
</td><td>
//code for table on the right
</td></tr></table>

结果是一对完美居中的表格,它们可以流畅地响应任意宽度和页面(重新)大小(并且align ="center"表属性可以被提升到带有边距autos的外部div中).

我的结论是,有些布局只能通过表来实现.

Answer 2

如果是我 - 我会做这样的事情:

<style type="text/css" media="screen">
  table {
    border: 1px solid black;
    float: left;
    width: 148px;
  }
  
  #table_container {
    width: 300px;
    margin: 0 auto;
  }
</style>

<div id="table_container">
  <table>
    <tr>
      <th>a</th>
      <th>b</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>4</td>
      <td>9</td>
    </tr>
    <tr>
      <td>16</td>
      <td>25</td>
    </tr>
  </table>
  <table>
    <tr>
      <th>a</th>
      <th>b</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>4</td>
      <td>9</td>
    </tr>
    <tr>
      <td>16</td>
      <td>25</td>
    </tr>
  </table>
</div>

用表如:

<style type="text/css" media="screen">
  table {
    border: 1px solid black;
    float: left;
    width: 148px;
  }
  
  #table_container {
    width: 300px;
    margin: 0 auto;
  }
</style>

<div id="table_container">
  <table>
    <tr>
      <th>a</th>
      <th>b</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>4</td>
      <td>9</td>
    </tr>
    <tr>
      <td>16</td>
      <td>25</td>
    </tr>
  </table>
  <table>
    <tr>
      <th>a</th>
      <th>b</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>4</td>
      <td>9</td>
    </tr>
    <tr>
      <td>16</td>
      <td>25</td>
    </tr>
  </table>
</div>

Answer 3

我意识到这是一个古老的问题,但无论如何都要进行.

以下内容适用于兼容浏览器和标准模式下的IE8(即设置了doctype).

#inner {text-align:center;}
.t {display:inline-block;}

不幸的是,实际上没有办法调整它在IE6中工作.对于IE7,向.t divs添加zoom:1(通过条件注释)可能会有所帮助,但我目前还没有IE7可用于测试.

Answer 4

问题是你需要给#inner一组width(除了auto或之外inherit).margin: 0 auto;只有当内部元素比其容器元素更窄时,该技巧才有效.在没有给出的情况下width,#inner会自动扩展到整个宽度#outer,这会导致其内容向左冲洗.

Answer 5

在我的脑海中，您可能会尝试对#outer而不是#inner使用“margin：0 auto”。

我经常向 DIV 添加背景颜色，以查看它们在视图上的布局方式。这可能是诊断这里发生的事情的好方法。