Is there a way to position two tables next to each other until one table grows wider than the set minimum width, and then have the second table appear below the first, with both tables centered within their parent <div>?
This is the current setup:
<!-- 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>LongTextStringHere</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>
The rows in table1 were designed to exceed the min-width causing table2 to drop below it due to insufficient space, maintaining alignment to the left side of its parent <div>:
+-------------------------+
|+-----+ |
|| t1 | |
|+-----+ |
|+-----+ |
|| t2 | |
|+-----+ |
| |
| div |
+-------------------------+
If one table exceeds the allocated width, I want them to align like this:
+-------------------------+
| +-----+ |
| | t1 | |
| +-----+ |
| +-----+ |
| | t2 | |
| +-----+ |
| |
| div |
+-------------------------+
How can I make this happen?