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>

页眉和页脚行的固定高度为 49 像素，中间部分 display:table-cell 填充剩余空间。这部分工作正常，直到您在布局“表”div 中添加数据表。

应该发生的是，无论布局表的单元格有多大，都应该保持该大小，并且数据表太大，应该有滚动条以在布局表的单元格内滚动它。

相反，无论我尝试什么，浏览器都会坚持炸毁布局表，以便整个数据表可以放入单元格中。结果是将滚动条应用于整个页面，而不是应用于包含表格的单元格。

我可以通过以像素为单位指定宽度来实现这一点，但目标是使用流畅的布局来做到这一点。

如何使单元格滚动，因此页脚和页眉始终可见，左右滚动也在布局单元格级别而不是页面级别？

我在这里创建了一个问题的小提琴：http: //jsfiddle.net/hhUnH/2/

4

1 回答 1

0

如果

  1. 这是一个完整的页面布局，

  2. 您的标头只不过是容器（不是标头而是标头）

  3. 你的页脚只不过是容器（不是 tfoot 而是 footer ）

  4. 该页眉和页脚具有已知的高度，

然后您可以将表格设置为绝对容器。 http://jsfiddle.net/hhUnH/4/ 

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

如果这些数据是要在 2D 中读取的数据，则使用表格，否则是混合沙拉 ot 标签:)

于 2013-06-20T17:31:11.027 回答