28

我在一个页面上有两个表格，我想并排显示，然后在页面中居中（实际上在另一个 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>

我知道这与表格浮动的事实有关，但我不知道我缺少什么。有许多网页描述了我在这里展示的技术，但无论如何它都不起作用；桌子顽固地紧贴着左边的边缘。

4

10 回答 10

24

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

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

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

结果是一对完美居中的表格，可以流畅地响应任意宽度和页面（重新）大小（并且可以将 align="center" 表格属性提升到具有自动边距的外部 div 中）。

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

于 2008-12-07T12:01:48.297 回答
22

如果是我 - 我会对桌子做这样的事情：

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

于 2008-12-06T23:28:17.150 回答
14

我意识到这是一个古老的问题，但无论如何。

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

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

不幸的是，真的没有办法调整它以在 IE6 中工作。对于 IE7，将 zoom:1 添加到 .t div（通过条件注释）可能会有所帮助，但我目前没有可用于测试的 IE7。

于 2009-11-11T18:00:28.447 回答
5

问题是你需要给出#inner一个集合width（除了autoor之外的任何东西inherit）。这个margin: 0 auto;技巧只有在内部元素比它的容器元素窄时才有效。如果没有给出width,#inner会自动扩展到 的全宽#outer，这会导致其内容向左对齐。

于 2008-12-06T23:10:39.510 回答
3

给你的内部 div 一个宽度。

例子

更改您的 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>

对此：

<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>
于 2008-12-06T23:10:02.410 回答
2

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

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

于 2008-12-06T23:02:55.670 回答
1 
<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>
于 2008-12-06T23:35:36.837 回答
1

问题是应该使表格居中的 DIV 没有定义宽度。默认情况下，DIV 是块元素并占据其父元素的整个宽度 - 在本例中是整个文档（通过#outer DIV 传播），因此自动边距样式无效。

要使这种技术起作用，您只需将具有 margin:auto 的 div 的宽度设置为除“auto”或“inherit”（固定像素值或百分比）之外的任何值。

于 2008-12-06T23:07:08.737 回答
1

我发现我可以通过简单地将两张并排的桌子放在第三张居中的桌子内来解决这个问题。这是代码

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

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

于 2016-04-29T21:00:24.623 回答
0

我提供了两种解决方案。挑选最适合您的一款。

解决方案#1：

<html>
<style>
#container {
width: 50%;
margin: auto;
text-align: center;
}
#first {
width:48%;
float: left;
height: 200px;
background-color: blue;
}
#second {
width: 48%;
float: left;
height: 200px;
background-color: green;
}
#clear {
clear: both;
}
#space{
width: 4%;
float: left;
height: 200px;
}
table{
border: 1px solid black;
margin: 0 auto;
table-layout:fixed;
width:100%;
text-align:center;
}
</style>
<body>

<div id = "container" >
<div id="first">
    <table>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
        </tr>
        <tr>
            <td>Value1</td>
            <td>Value2</td>
        </tr>
    </table>
</div>
<div id = "space" >
</div>
<div id = "second" >
<table>
    <tr>
        <th>Column1</th>
        <th>Column2</th>
    </tr>
    <tr>
        <td>Value1</td>
        <td>Value2</td>
    </tr>
</table>
</div>
<div id = "clear" ></div>
</div>

</body>
</html>

解决方案#2：

<html>
<style>
#container {
margin:0 auto;
text-align: center;
}
#first {
float: left;
}
#second {
float: left;
}
#clear {
clear: both;
}
#space{
width:20px;
height:20px;
float: left;
}
.table, .table th, .table td{
border: 1px solid black;
}
</style>
<body>

<table id = "container" >
<td>
<div id="first">
    <table class="table">
        <tr>
            <th>Column1</th>
            <th>Column2</th>
        </tr>
        <tr>
            <td>Value1</td>
            <td>Value2</td>
        </tr>
    </table>
</div>
<div id = "space" >
</div>
<div id = "second" >
<table class="table">
    <tr>
        <th>Column1</th>
        <th>Column2</th>
    </tr>
    <tr>
        <td>Value1</td>
        <td>Value2</td>
    </tr>
</table>
</div>
<div id = "clear" ></div>
</div>
</td>
</table>
</body>
</html>

注意：根据您在第一个解决方案中的需要更改宽度百分比。

于 2019-12-04T10:09:47.837 回答