html - テーブルの 2 行を左右に並べるにはどうすればよいでしょうか?

Question

またはとを使用して、表の 2 行を整列させずに、1 行trを左に、もう 1 行を右にできますposition:relativeか? しかし、それも整列します。 position:absolutemargin

tr2つを揃えないようにするにはどうすればよいですか?

これ欲しい：

私がこれが欲しいのは：
私はhtmlを持っています：

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

「左 1 2 3」をアニメーションとしてゆっくりと非表示にしたい場合、「右」の幅は 100% になりますが、必要な効果は、左 td 非表示、td 全体が左に移動し、最初のテキスト「左」が消えるときです。 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は1つしかなく、テーブル全体を移動しますが、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>

または、これを行う最良の方法は、このフィドルのように、2 つのフロート要素を使用することです

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