将两个表格彼此相邻

Question

我有两个我想并排放置的HTML表格。

我已经看过以前的答案，他们提到你需要指定内联块并向左浮动。

下面是我的两个表都有的例子。但是它仍然显示在另一个表下面，为什么？

"<table style ='font-size: 10pt; float: left; display: inline-block; cellpadding='3'>" 

Answer 1

不要在桌子上使用inline-block，因为它会改变自己的行为（如果你需要一个像vertical-align规则）。但是你可以使用float: left;并禁用之后的浮动。这里是例子：jsFiddle

Answer 2

你的错误是在这里...

第一表格，你必须指定display:inline-block和第二台使用float:left就像这样......

以全码查看:::

 

 
    <table border="1" style="display: inline-block;"> 
 
     <tr> 
 
      <td>Cell content</td> 
 
      <td>Cell content</td> 
 
      <td>Cell content</td> 
 
     </tr> 
 
    </table> 
 
    <table border=1 style="float:left;" cellpadding="3"> 
 
     <tr> 
 
      <td>Cell content</td> 
 
      <td>Cell content</td> 
 
      <td>Cell content</td> 
 
     </tr> 
 
    </table> 
 

 
<hr>

Answer 3

随着经验的状态，不要设置样式像float或display直接在表格元素上。这可能会导致意外的行为，特别是处理不同版本的浏览器。而是使用div元素作为表格容器并在容器上设置样式。

<div class="table-container"><table></table></div> 
<div class="table-container"><table></table></div> 

并设置样式

.table-container { display: inline-block; vertical-align: top; } 

Answer 4

你忘了inline-block;和cellpading

实例之间添加'：

<table style ='font-size: 10pt; float: left; display: inline-block;' cellpadding='3' border='1'> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    </tr> 
 
</table> 
 
<table style ='font-size: 10pt; float: left; display: inline-block;' cellpadding='3' border='1'> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    </tr> 
 
</table>