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

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

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

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

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

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

给你的内部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>

Answer 6

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

我经常为我的DIV添加背景颜色，以了解它们如何在视图上进行布局。这可能是诊断这里发生了什么的好方法。

Answer 7

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

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

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

Answer 9

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

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

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

Answer 10

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

解决方案＃1：

df1[-1] %>% select_if(~sd(.) != 0)

解决方案2：

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

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

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

10 个答案: