如何让两条桌子左右两行？

Question

我可以使两张桌子不对齐，剩下一张tr，另一张是正确的，使用position:relative或position:absolute和margin？但它也是一致的。

如何让两个tr不对齐？

我想要这个：

我想要的是：
我有一个HTML：

<table>
  <tr colspan="2"><td>top</td><tr>
  <tr><td>left 1 2 3</td><td>right</td></tr>
</table>

我希望将'left 1 2 3'缓慢隐藏为动画，然后'right'的宽度变为100％ 但我需要的效果是当左td隐藏时，整个td向左移动，第一个文本'left'消失，然后是1，然后是2,3，然后整个td隐藏。

我试过这个：

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">          </script>
    <style>
    body{margin:0px}
    </style>
    <script>
        function hid() {
            $("#d1").animate({ "margin-left": "-102px" });
        }
    </script>
  <table id="d1" cellpadding="0" cellspacing="0">
    <tr >
      <td style="position: relative; width: 100px;         height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer">
          123
       </td>
       <td>
           abc
       </td>        
     </tr>
  </table>
  <input type="button" onClick="hid()">

这看起来像我想要的，但只有一个tr，它移动整个表而不是tr。

Answer 1

你的意思是this JSFiddle？

<table style='width:100%;'>
<tr>
 <td style='text-align:right;'>RIGHT</td>
</tr>
<tr>
 <td style='text-align:left;'>LEFT</td>
</tr>
</table>

或者，最好的方法是使用两个浮动元素，如fiddle

<div style='border:1px solid black;width:100%;height:44px;'>
<div style='float:right;width:80px;border:1px solid black;height:20px;'></div>    
<div style='clear:both;'></div>        
<div style='float:left;width:80px;border:1px solid black;height:20px;'></div>
</div>