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

Question

我可以使用or and使表格的两行不对齐，一个tr是左，另一个是右吗？但它也对齐。 position:relativeposition:absolutemargin

我怎样才能让两个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％但我需要的效果是当left 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

你的意思是像这样的 JSFiddle？

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

或者，最好的方法是使用两个浮动元素，如this 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>