2 つのテーブルを隣同士に並べて表示し、一方のテーブルの幅が大きくなりすぎるようにするにはどうすればよいですか?
これが発生した場合、右側のテーブルを最初の (左側の) テーブルの下に表示し、両方のテーブルを親の中央に配置します<div>。
これは私がこれまでに得たものです：
<!-- center div in the middle of the page -->
<div style="width: 80%; margin-left: auto; margin-right: auto">
<table style="float: left; min-width: 50%">
<tr><th>Header table 1</th></tr>
<tr><td>Row1</td></tr>
</table>
<table style="float: left; min-width: 50%">
<tr><th>Header table 2</th></tr>
<tr><td>Row1</td></tr>
</table>
<div style="clear: both"></div>
</div>
table1のRow1-cell に長いテキスト文字列を入れて最小幅を超えたところ、結果は をtable2下回りtable1ましたが、float:left両方のテーブルが親の左側に接着されたままになりました<div>。
+-------------------------+
|+-----+ |
|| t1 | |
|+-----+ |
|+-----+ |
|| t2 | |
|+-----+ |
| |
| div |
+-------------------------+
テーブルの幅が大きくなりすぎて、行に表示できない場合は、次のように表示します。
+-------------------------+
| +-----+ |
| | t1 | |
| +-----+ |
| +-----+ |
| | t2 | |
| +-----+ |
| |
| div |
+-------------------------+
どうすればそれを達成できますか？