オーバーフロー：自動プロパティは水平スクロールバーのみを追加しますか？

Question

私は[残念ながら]テーブルの中にテーブルを持っています。外部表の最後の<td>はそうのようになります。

<td class="valign-top width-40 padding-right-4px"> 
    <div class="grid-filter-container" style="overflow:auto;"> 
     <table id="FilterColumns" class="fullwidth fimscaletable"> 
      <thead> 
       <tr> 
        <th class="width-25 textalign-left k-header k-grid-header"> 
         <span class="text-white">Field Name</span> 
        </th> 
        <th class="width-75 textalign-center k-header k-grid-header"> 
         <span class="text-white">Condition</span> 
        </th> 
       </tr> 
      </thead> 
      <tbody></tbody> 
      <tbody></tbody> 
     </table> 
    </div> 
</td> 

内部表は、プログラムで行がそれに追加され、それがデータのエクスポートモジュールの一部です。ユーザーは左側のフィールドのリストを表示され、リストから選択していくつかのパラメーターを設定し、右側のこのテーブルに追加することができます。

ご覧のとおり、内部テーブルを含む<div>のoverflowプロパティはautoに設定されています。しかし、実行時にそれが唯一の「利益」水平スクロールバー：

は、右の表には、左のコントロールと同じサイズとして始まったが、私はそれにさらに条件を追加すると、それが成長します高さ代わりにdivをスクロールするだけです。このスクリーンショットはIEで撮影されたことに注意してください。まだ他のブラウザをテストしていません。

grid-filter-containerクラスがそのように次のように定義されます

.k-window .grid-filter-container { 
    border: solid 1px #909090; 
    min-height: 200px; 
    padding: 0px; 
    margin: 0px; 
} 

JSのフィドルは、実際にはそうでない場合、私はサンプルを提供しようと思い、私の会社のインターネット・フィルターによってブロックされています。

Answer 1

コンテナ

.k-window .grid-filter-container { 
border: solid 1px #909090; 
min-height: 200px; 
padding: 0px; 
margin: 0px; 
    height: 200px; 
}