テーブルが 2 つあれば?
<table class="one"> and... <table class="two">
CSS は次のようになります。
table.one {
position: relative;
float: left;
}
table.two {
position: relative;
float: right;
}
機能していません...
position:relative を使用しないでください。正しくフロートするために、各テーブルに幅を指定してください。
table.one {
float:left;
width:45%;
}
table.two {
width:45%;
float:right;
}
テーブルクラスに定義するだけ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>
それらにも幅を与えてみてください。それぞれ 40% が適切なテストです。
動作します。ライブデモを行います。これを確認してください
そして今、あなたはこのように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>
うまくいかないってどういうこと?
あなたが持っている CSS は、親要素の両側に 1 つのテーブルを配置します。親の反対側ではなく、互いに直接フロートすることを探している場合は、「float: left;」が必要です。それらの両方で(または逆に両方で「float:right;」)。