Question

如何将两个表紧挨着显示，直到其中一个表的宽度变得太大？

如果发生这种情况，我希望右侧手表显示在第一个（左侧）表的下方，并且两个表都在其父<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的{{1}} - 单元格中，使其超出其最小宽度，结果是Row1低于table2，但是table1将两个表格粘贴在其父float:left的左侧：

<div>

如果其中一个表的宽度变得太大而无法将它们连续显示，我希望它看起来像这样：

+-------------------------+
|+-----+                  |
|| t1  |                  |
|+-----+                  |
|+-----+                  |
|| t2  |                  |
|+-----+                  |
|                         |
|          div            |
+-------------------------+

我如何实现这一目标？

Answer 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;}

CSS / HTML显示表内联直到超过父div的宽度？

1 个答案: