两个HTML表格并排放在页面*

I have two tables on a page that I want to display side by side, and then center them within the page (actually within another div, but this is the simplest I could come up with):

我在一个页面上有两个表，我想并排显示，然后将它们集中在页面内(实际上是在另一个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>

I understand that it's something to do with the fact that the tables are floated, but I'm at a loss as to understand what I'm missing. There are many web pages that describe something like the technique I show here, but in any event it doesn't work; the tables cling stubbornly to the left hand margin.

我知道这与表是浮动的事实有关，但我不知道我遗漏了什么。有很多网页描述了类似我在这里展示的技术，但无论如何它都不起作用;桌子顽固地粘在左手边。

9 个解决方案

#1

Unfortunately, all of these solutions rely on specifying a fixed width. Since the tables are generated dynamically (statistical results pulled from a database), the width can not be known in advance.

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

The desired result can be achieved by wrapping the two tables within another table:

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

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

and the result is a perfectly centered pair of tables that responds fluidly to arbitrary widths and page (re)sizes (and the align="center" table attribute could be hoisted out into an outer div with margin autos).

结果是一对完全居中的表，可以流畅地响应任意宽度和页面(re)大小(align="center" table属性可以用margin autos将其提升到外部div中)。

I conclude that there are some layouts that can only be achieved with tables.

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

#2

If it was me - I would do something like this:

如果是我，我会这样做:

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

With the table like:

与表:

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

#3

I realize this is an ancient question, but here goes anyway.

我意识到这是一个古老的问题，但不管怎样。

The following will work in compliant browsers and IE8 in standards mode (i.e. with a doctype set).

以下将在兼容的浏览器和IE8标准模式下工作(即使用doctype集合)。

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

Unfortunately, there's really no way to tweak it to work in IE6. For IE7, adding a zoom:1 to the .t divs (via a conditional comment) might help, but I don't have IE7 available for testing at the moment.

不幸的是，在IE6中真的没有办法调整它。对于IE7，添加一个缩放:1到。t divs(通过一个有条件的注释)可能会有帮助，但是目前我没有IE7可供测试。

#4

The problem is that you need to give #inner a set width (anything but auto or inherit). The margin: 0 auto; trick only works if the inner element is narrower than its container element. Without being given a width, #inner is automatically expanding to the full width of #outer, which causes its contents to be flush left.

问题是您需要给#inner一个设置宽度(除了自动或继承)。保证金:0汽车;只有当内部元素比容器元素窄时，技巧才有效。在没有给定宽度的情况下，#inner会自动扩展到#outer的全宽度，这将导致其内容向左刷新。

#5

Give your inner div a width.

给你的内div一个宽度。

EXAMPLE

例子

Change your CSS:

改变你的CSS:

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

To this:

:

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

#6

Off the top of my head, you might try using the "margin: 0 auto" for #outer rather than #inner.

在我的脑海中，你可以尝试使用“边框:0 auto”来表示#outer，而不是#inner。

I often add background-color to my DIVs to see how they're laying out on the view. That might be a good way to diagnose what's going onn here.

我经常在我的沙发上添加背景色，看看它们是如何摆放的。这可能是一种很好的诊断方法。

#7

The problem is that the DIV that should center your tables has no width defined. By default, DIVs are block elements and take up the entire width of their parent - in this case the entire document (propagating through the #outer DIV), so the automatic margin style has no effect.

问题是应该以表为中心的DIV没有定义宽度。默认情况下，DIV是块元素，占据了父元素的整个宽度——在这种情况下，整个文档(通过#outer DIV传播)，因此自动空白样式没有任何影响。

For this technique to work, you simply have to set the width of the div that has margin:auto to anything but "auto" or "inherit" (either a fixed pixel value or a percentage).

要使用这种技术，您只需设置具有裕度的div的宽度:auto到除“自动”或“继承”之外的任何值(固定像素值或百分比)。

#8

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

#9

I found I could solve this by simply putting the two side by side tables inside of a third table that was centered. Here is the code

我发现，我可以通过简单地将两个边表放在居中的第三个表中来解决这个问题。这是代码

I added two lines of code at the top and bottom of the two existing tables

我在两个现有表的顶部和底部添加了两行代码。

<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">
   <table style="margin-left: auto; margin-right: auto;">
   <td>
    <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>
    </td>
    </table>
  </div>
  <div id="clearit">all done.</div>
</div>