16

テーブルを含む背景を持つ div があります。テーブルが長いよりも狭い場合を除いて、divの幅を100％にしたい。私はこのようなことができます：

.my-div {
  width:100%;
  min-width:900px;
}

幅が 900px のテーブルには最適ですが、それよりも狭い場合は不要なスクロールバーが表示され、それよりも広い場合はコンテンツに到達できなくなります。明らかに、これは JavaScript で簡単に解決できますが、CSS のみの解決策があるかどうかを知りたいので、私のアプリケーションはそれほど JS に重きを置いていません。

何が起こっているかのビジュアルについては、こちらを参照してください。私が望むのは、テーブル内のテキストがオーバーフローしたときに、緑の背景がビューポートをオーバーフローすることです。

4

5 に答える 5

2

どうですか...

.my-div {
    overflow: auto;    
}

table {
    float: left;
}

ライブデモ: http://jsfiddle.net/WTwdN/4/

于 2012-07-21T18:49:35.660 に答える
2

私が望むのは、テーブル内のテキストがオーバーフローしたときに、緑の背景がビューポートをオーバーフローすることです。

テーブルをテーブル内にラップするだけなので、両方ともオーバーフローします。

.my-div {
  width:100%;
  height:400px;
  display: table;
  background-color:#bada55; 
}
td {
  white-space:nowrap;
}
table {
  width: 100%;
}
<div class="my-div">
  <table>
      <thead>
          <tr><td>my table</td></tr>
      </thead>    
      <tbody>
          <tr><td>my dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppppppppp</td></tr>              
      </tbody>
  </table>
</div>

divコンテナをビューポートよりも大きくしたくない場合は、テーブルに背景を設定してください。

.my-div {
  width:100%;
  height:400px;
}
table {
  height: 100%;
  width: 100%;
  background-color:#bada55; 
}
td {
  white-space:nowrap;
  vertical-align: top;
}
<div class="my-div">
  <table>
      <thead>
          <tr><td>my table</td></tr>
      </thead>    
      <tbody>
          <tr><td>my dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppppppppp</td></tr>              
      </tbody>
  </table>
</div>

于 2018-05-18T19:20:12.613 に答える