CSS/HTML 内联显示表格，直到它们超过父 div 的宽度？答案

【问题标题】：CSS/HTML display tables inline until they exceed parent div's width?CSS/HTML 内联显示表格，直到它们超过父 div 的宽度？
【发布时间】：2013-08-07 20:53:27
【问题描述】：

如何将两张表格并排显示，直到其中一张的宽度变得太大？

如果发生这种情况，我希望右侧表格显示在第一个（左侧）表格下方，并且两个表格都位于其父级 <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            |
+-------------------------+

我如何做到这一点？

【问题讨论】：

标签： html css html-table center

【解决方案1】：

看看这是否适合你：jsFiddle

HTML：

<div>
    <table>
        <tr><th>Header table 1</th></tr>
        <tr><td>Row1</td></tr>
    </table>
    <table>
        <tr><th>Header table 2</th></tr>
        <tr><td>Row1</td></tr>
    </table>
</div>

CSS：

* {margin:0; padding:0; outline:none;} div {width:80%; margin:0 auto; text-align:center; overflow:hidden; background:#ddd;} table {display:inline-block; min-width:49%; background:#ccc;}

【讨论】：

非常感谢您，先生，正是我想要的！