無法對齊平行於彼此的HTML表格

Question

我已經創建了兩個HTML網格表格，但我在找到彼此平行/對齊時遇到困難。

我正在使用align = right，但表格正在向下對齊（一個在另一個之下），而不是按並行順序向右移動。任何人都可以在我的下面的代碼中提示我在哪裏犯錯，我該如何糾正它？

P.S：我下面的代碼問題，可以通過複製並保存在一個記事本進行檢查說的test.txt和重命名爲test.html中和在IE或Firefox瀏覽器中打開它。

<table id="ss" class="easyui-datagrid" style="width:380px;height:auto;"> 
    <thead> 
    <tr><th field="name2" width="80">Status</th></tr> 
    </thead> 
    <tbody> 
    <tr> <td>India</td></tr> 
    <tr><td>Canada</td></tr> 
    <tr><td>USA</td></tr> 
    <tr><td>UK</td></tr> 
    </tbody> 
</table> 
<table id="vv" class="easyui-datagrid" style="width:380px;height:auto;" align = "right"> 
    <thead> 
    <tr><th field="name3" width="80">Status</th></tr> 
    </thead> 
    <tbody> 
    <tr><td>India</td></tr> 
    <tr><td>China</td></tr> 
    <tr><td>Oz</td></tr> 
    <tr><td>UK</td></tr> 
    </tbody> 
</table> 

Answer 1

這裏是您的解決方案：

<div style="float:left;"><table id="ss" class="easyui-datagrid" style="width:380px;height:auto;"> 
    <thead> 
    <tr><th field="name2" width="80">Status</th></tr> 
    </thead> 
    <tbody> 
    <tr> <td>India</td></tr> 
    <tr><td>Canada</td></tr> 
    <tr><td>USA</td></tr> 
    <tr><td>UK</td></tr> 
    </tbody> 
</table> 
</div> 
<div style="float:left;"><table id="vv" class="easyui-datagrid" style="width:380px;height:auto;"> 
    <thead> 
    <tr><th field="name3" width="80">Status</th></tr> 
    </thead> 
    <tbody> 
    <tr><td>India</td></tr> 
    <tr><td>China</td></tr> 
    <tr><td>Oz</td></tr> 
    <tr><td>UK</td></tr> 
    </tbody> 
</table> 
</div> 

Answer 2

你的意思是你想要並排而不是一個下面的表？

您可以一個float: left添加到第一個表（而不是忘了第二個表後清除），或者把每個表在div，並設置這些div小號display: inline-block。

Answer 3

jsfiddle.net/S45CQ/ 

使用float：left屬性並減小表的寬度或將它們放在包裝div中。

還從您的html中刪除兩個關閉身體標記。

Answer 4

表格中的右對齊樣式將所有元素對齊到右邊。 （每欄中的文字和圖像等）。

您需要添加「float：left;」在風格。

Answer 5

在這裏看到：http://jsfiddle.net/TmC4C/

你還需要在你的第一個表指定align="left"。儘管使用floats代替你會好很多。

我已將寬度更改爲50%，因爲它也可能是表格的寬度對於屏幕尺寸來說太大，導致將其他元件推向下方。