0

次のようなページ レイアウトがあります。

<div class="LayoutTable">
   <div class="LayoutTableRow Header">
      <div class="LayoutTableCell Header">            
         <h1 class="InterfaceName">Item</h1>            
      </div>
   </div>

   <div class="LayoutTableRow Main">
      <div class="LayoutTableCell">
         <div class="GridTableWrapper">


            <!-- A large inner table goes here -->


         </div><!-- GridTableWrapper -->
      </div><!-- LayoutTableCell-->
   </div><!-- LayoutTableRow-->

   <div class="LayoutTableRow Footer">
      <div class="LayoutTableCell Footer">         
      </div>
   </div>
</div>

ヘッダー行とフッター行の高さは 49px に固定されており、中央のセクション (display:table-cell) が残りのスペースを埋めます。レイアウト「テーブル」div 内にデータ テーブルを追加するまで、この部分は正常に機能します。

レイアウト テーブルのセルがどれほど大きくても、そのサイズを維持し、データ テーブルが大きすぎる場合は、レイアウト テーブルのセル内でスクロールするためのスクロール バーを用意する必要があります。

代わりに、私が何をしようとしても、ブラウザーはレイアウト テーブルを拡大することを要求し、データ テーブル全体がセルに収まるようにします。その結果、テーブルのあるセルではなく、ページ全体にスクロール バーが適用されます。

ピクセル単位で幅を指定することでこれを実現できますが、目標は流動的なレイアウトを使用してこれを行うことです。

セルがスクロールされ、フッターとヘッダーが常に表示され、左右のスクロールもページ レベルではなくレイアウト セル レベルになるようにするにはどうすればよいですか?

ここで問題のフィドルを作成しました：http://jsfiddle.net/hhUnH/2/

4

1 に答える 1

0

もしも

  1. フルページのレイアウトです

  2. ヘッダーはコンテナにすぎないこと（ thead ではなく header ）

  3. あなたのフッターはコンテナにすぎないこと（ tfoot ではなく footer ）

  4. ヘッダーとフッターの高さが既知であること、

次に、テーブルを絶対コンテナに設定できます。 http://jsfiddle.net/hhUnH/4/ 

   #tableContainer  {
    position:absolute;
    left:0;
    right:0;
    top:49px;
    bottom:49px;
    }

これらのデータが 2D で読み取るデータである場合は、テーブルを使用します。それ以外の場合は、タグの混合サラダです :)

于 2013-06-20T17:31:11.027 に答える