13

テーブルが 2 つあれば?

<table class="one"> and... <table class="two">

CSS は次のようになります。

table.one {
    position: relative;
    float: left;
}
table.two {
    position: relative;
    float: right;
}

機能していません...

4

5 に答える 5

22

position:relative を使用しないでください。正しくフロートするために、各テーブルに幅を指定してください。

table.one {
    float:left;
    width:45%;
}

table.two   {
    width:45%;
    float:right;
}​
于 2012-04-23T04:11:16.987 に答える
3

テーブルクラスに定義するだけfloat: leftで、自動的に隣り合うようになります。

table {
    float:left;
    background:yellow;
    margin-left:10px;
}
<table>
    <tr>
        <td>Table 1</td>
    </tr>
    <tr>
        <td>blah blah</td>
        <td>blah blah</td>
        <td>blah blah</td>
    </tr>

</table>

<table>
    <tr>
        <td>Table 2</td>
    </tr>
    <tr>
        <td>blah blah</td>
        <td>blah blah</td>
        <td>blah blah</td>
    </tr>
</table>

于 2012-04-23T05:02:27.513 に答える
2

それらにも幅を与えてみてください。それぞれ 40% が適切なテストです。

于 2012-04-23T04:10:16.770 に答える
1

動作します。ライブデモを行います。これを確認してください

そして今、あなたはこのように2つのオプションを行うことができます

オプション 1

table.one {
  position:relative;
  float:left;
  border:solid 1px green;
}

table.two {
  position:relative;
  float:right;
  border:solid 1px red;
}
<table class="one">
  <tr>
    <td>hello demo here</td>
  </tr>
</table>

<table class="two">
  <tr>
    <td>hello demo here 2</td>
  </tr>
</table>


オプション 2

<table class="one" align="left" border="1">
  <tr>
    <td>hello demo here</td>
  </tr>
</table>

<table class="two" align="right" border="1">
  <tr>
    <td>hello demo here 2</td>
  </tr>
</table>

于 2012-04-23T04:53:57.487 に答える
-1

うまくいかないってどういうこと?

あなたが持っている CSS は、親要素の両側に 1 つのテーブルを配置します。親の反対側ではなく、互いに直接フロートすることを探している場合は、「float: left;」が必要です。それらの両方で(または逆に両方で「float:right;」)。

于 2012-04-23T04:15:47.243 に答える