0

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

如果发生这种情况，我希望右侧表格显示在第一个（左侧）表格下方，并且两个表格都在其 parent 内居中<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's Row1-cell 以使其超过其最小宽度，结果是table2下降到下方table1，但float:left两个表都粘在其父级的左侧<div>：

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

如果其中一个表格的宽度太大而无法连续显示它们，我希望它看起来像什么：

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

我该如何做到这一点？

4

1 回答 1

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;}
于 2013-08-06T18:32:10.977 回答