两个如何使表格的两行位于左侧和右侧？

Question

我可以使用position:relative 或position:absolute 和margin 使表格的两行不对齐，一个tr 在左边，另一个在右边？但它也对齐。

如何让两个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 hide 时，整个 td 向左移动，第一个文本“left”消失，然后是 1，然后是 2,3，然后是整个 td hide。

我试过这个：

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