0

2 つのテーブルを同じ行に表示したい。それから私はfloat: left; このように使用しています。

これらのテーブルの幅がコンテナーよりも大きい場合overflow: hidden;、余剰を非表示にするために使用します。

オーバーフローは完全に隠されていますが、テーブルは同じ行にとどまりません。

http://jsfiddle.net/bULcB/3/

どうすれば修正できますか。私はテーブルを同じ列にとどめたいです。

4

3 に答える 3

1

div2 つのテーブルをラップするコンテナーを追加します。そしてwidth、2 つのテーブルを一列に並べるのに十分な大きさにします。div親が指定したように、コンテナのオーバーフロー部分は表示されませんoverflow: hidden;。

jsFiddle の更新された例を参照してください

于 2013-03-29T07:07:26.580 に答える
1

position: relative親要素に与え、position: absolute; top: 0; left: 100px;2 番目の子要素に与えます(2 番目の子要素からプロパティを削除しfloatます)。

働くフィドル

またはそうでなければ

White-space: nowrapの代わりに親要素に与え、display: inline-block子要素に与えますfloat: left。

ブラウザの最新バージョンでのみ動作します。

働くフィドル

于 2013-03-29T07:12:17.380 に答える
0 
div style="width: 300px; overflow: hidden; ">
<table cellspacing="0" cellpadding="0" style="float: left;  background-color:red;">
    <tr>
        <td>First Table</td>
    </tr>
</table>
<table cellspacing="0" cellpadding="0" style="float: left; background-color:yellow;">
    <tr>
        <td>Second Table</td>
    </tr>
</table>

于 2013-03-29T07:23:07.033 に答える