Question

我创建了两个HTML网格表，但我发现在将它们彼此平行放置/对齐时遇到了困难。

我正在使用align = right但是表格正在向下对齐（一个在另一个之下）而不是以平行顺序向右移动。任何人都可以在我的下面的代码中建议我犯错误的地方，我该如何纠正它？

PS ：我可以通过复制并将其保存在记事本中检查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

你的意思是你希望桌子并排而不是一个在另一个之下？

您可以向第一个表格添加float: left（并且不要忘记在第二个表格之后清除），或者将每个表格放在div中并设置display: inline-block那些div s。

Answer 2

jsfiddle.net/S45CQ/

使用float：left属性并减小表的宽度或将它们放在包装器div中。

同时从html中删除两个关闭的body标记。

Answer 3

桌子上的右对齐样式会将右边的所有元素对齐。（每栏中的文字和图像等）。

你需要添加＆＃34; float：left;＆＃34;在风格。

Answer 4

见这里：http://jsfiddle.net/TmC4C/

您还需要在第一张桌子上指定align="left"。虽然使用floats会更好。

我已将您的宽度更改为50%，因为它也可能是表格的宽度对于屏幕尺寸来说太大，导致一个人将另一个推到另一个下面。

Answer 5

以下是您的解决方案：

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

无法将HTML表格彼此平行对齐

5 个答案: