CSS 两个 HTML 表格并排，以页面为中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/346940/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Two HTML tables side by side, centered on the page
提问by dland
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.
我知道这与表格浮动的事实有关，但我不知道我错过了什么。有很多网页描述了我在这里展示的技术，但无论如何它都不起作用；桌子顽固地粘在左边的边缘。
回答by dland
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).
结果是一对完美居中的表格，可以流畅地响应任意宽度和页面（重新）大小（并且 align="center" 表格属性可以用边距自动提升到外部 div 中）。
I conclude that there are some layouts that can only be achieved with tables.
我的结论是，有些布局只能用表格来实现。
回答by Tim Knight
If it was me - I would do with the table 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>
<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>回答by Martha
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，将 zoom:1 添加到 .t div（通过条件注释）可能会有所帮助，但我目前没有可用于测试的 IE7。
回答by gregnostic
The problem is that you need to give #innera set width(anything but autoor inherit). The margin: 0 auto;trick only works if the inner element is narrower than its container element. Without being given a width, #inneris automatically expanding to the full width of #outer, which causes its contents to be flush left.
问题是你需要给出#inner一个集合width（除了auto或 之外的任何东西inherit）。该margin: 0 auto;技巧仅在内部元素比其容器元素窄时才有效。没有给出width,#inner会自动扩展到 的全宽#outer，这会导致其内容向左对齐。
回答by Andrew G. Johnson
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>
回答by Jim Nelson
Off the top of my head, you might try using the "margin: 0 auto" for #outer rather than #inner.
在我的脑海中，您可能会尝试对#outer 使用“margin: 0 auto”而不是#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.
我经常为我的 DIV 添加背景颜色以查看它们在视图中的布局。这可能是诊断这里发生了什么的好方法。
回答by Eran Galperin
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).
要使此技术起作用，您只需将具有 margin:auto 的 div 的宽度设置为“auto”或“inherit”（固定像素值或百分比）以外的任何内容。
回答by Technastar
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>回答by BenMaddox
<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>
回答by chindirala sampath kumar
I have provided two solutions. Pick up which one best suits for you.
我提供了两种解决方案。挑选最适合您的那一款。
Solution#1:
解决方案#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>Solution#2:
解决方案#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>Note: Change the width percentage as per your need in 1st solution.
注意：在第一个解决方案中根据您的需要更改宽度百分比。
