Html 如何从左到右浮动两个相邻的桌子？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10274669/
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
How can I float two tables next to each other left to right?
提问by Elias7
If I had two tables?
如果我有两张桌子？
<table class="one"> and... <table class="two">
And the CSS looks like:
CSS看起来像：
table.one {
position: relative;
float: left;
}
table.two {
position: relative;
float: right;
}
It is not working...
它不工作...
回答by irfanmcsd
Don't use position:relative, just provide width for each table in order to float properly.
不要使用位置：相对，只需为每个表提供宽度以正确浮动。
table.one {
float:left;
width:45%;
}
table.two {
width:45%;
float:right;
}?
回答by Shailender Arora
You can simply define float: leftto your table class it will come automatically next to each other:
您可以简单地float: left为您的表类定义它会自动彼此相邻：
table {
float:left;
background:yellow;
margin-left:10px;
}<table>
<tr>
<td>Table 1</td>
</tr>
<tr>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
</tr>
</table>
<table>
<tr>
<td>Table 2</td>
</tr>
<tr>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
</tr>
</table>回答by Ryan Potter
Try giving them a width as well. 40% each should be a good test.
尝试给它们一个宽度。每个 40% 应该是一个很好的测试。
回答by Rohit Azad
Hey it working i give you live demo now check this
嘿它工作我给你现场演示现在检查这个
and now you can do thing two option as like this
现在你可以像这样做两个选项
Option one
选项一
table.one {
position:relative;
float:left;
border:solid 1px green;
}
table.two {
position:relative;
float:right;
border:solid 1px red;
}<table class="one">
<tr>
<td>hello demo here</td>
</tr>
</table>
<table class="two">
<tr>
<td>hello demo here 2</td>
</tr>
</table>Option two
选项二
<table class="one" align="left" border="1">
<tr>
<td>hello demo here</td>
</tr>
</table>
<table class="two" align="right" border="1">
<tr>
<td>hello demo here 2</td>
</tr>
</table>回答by arychj
What do you mean it's not working?
你的意思是它不起作用？
The CSS that you have will put one table on each side of the parent element. If you're looking for them to be float directly against each other rather than on opposite sides of the parent you'll want 'float: left;' in both of them (or conversely 'float: right;' in both of them).
您拥有的 CSS 将在父元素的每一侧放置一个表格。如果您希望它们直接相互浮动而不是在父项的两侧浮动，则您需要“浮动：左；” 在它们两个中（或相反地“浮动：正确；”在它们两个中）。
