0

ここ(および下) では、コンテンツをラップしない「中間」の div に関する問題を確認できます。テーブルのコンテンツ全体を自動的にラップするようにしようとしているので、きれいな白い 10 ピクセルのパディングされた境界線がずっとあります。表示モード、フロート、クリア、オーバーフローで遊んで、考えられるすべてを試しました...しかし、何も機能していないようです。誰かが私が間違っているところを見ることができますか?

#outer {
    height : 200px;
    width : 200px;
    background : red;
    overflow : auto;
    padding : 10px;
}
#middle {
    background : white;
    padding : 10px;
}
#inner {
    border : 1px solid purple;
}
td {
    background : cyan;
    padding : 5px;
    border : 1px solid blue;
}
<div id="outer">
  <div id="middle">
    <table id="inner">
      <tr>
        <td>this is some random text</td>
        <td>this is some random text</td>
        <td>this is some random text</td>
        <td>this is some random text</td>
      </tr>
    </table>
  </div>
</div>

4

5 に答える 5

2

追加

display:inline-block;

#middle定義に。

display: inline と display: inline-block の違いは何ですか? inline-blockプロパティ値に関する詳細を提供します。

この更新された fiddleを参照してください。

于 2013-01-24T09:00:57.973 に答える
1

table-layout:fixedを使用できます。次のように書きます。

#inner {
            border : 1px solid purple;
            table-layout: fixed;
            width: 100%;
        }

これをチェックしてくださいhttp://jsfiddle.net/nCe8k/10/

于 2013-01-24T09:04:04.363 に答える
0

親コンテナーをオーバーフローのない固定サイズにしたい場合、これを回避する方法はありません。テーブルはこの点で柔軟ではなく、最小サイズがあるため、デフォルトでは親コンテナーの境界の外まで拡張されます。親コンテナを大きくする必要があります。

    #outer {
        height : 200px;
        width : 300px;
        background : red;
        overflow : auto;
        padding : 10px;
    }

ここを参照してください：http://jsfiddle.net/tMaCv/

于 2013-01-24T09:01:41.207 に答える
0

それ以外の場合は、#inner に #outer の幅からパディングの値を引いた値 (この例では 20px) があることを伝える必要があります。

しかし、何かを表示したい場合は、 #outer を大きくすることを考えて、 のサイズを追跡する必要があります。

于 2013-01-24T09:03:34.030 に答える
0

テーブルの問題は、常にコンテンツ全体を表示しようとすることです。「random」という単語を 4 回並べると、200px 以上のスペースが必要です。しかし、これは親要素のサイズを変更しません。これには、実際には 4 つの解決策があります。

  1. js を使用して、テーブルの実際の幅を計算します
  2. より広いテーブルを使用してください（可能であれば）:-)
  3. 少なくともレイアウトを台無しにしないように、overflow:hidden を使用します。
  4. 外側の要素に幅の最小幅の insetad を使用します
于 2013-01-24T09:06:30.547 に答える