Question

我有这样的页面布局：

<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，填充剩余空间。这部分工作正常，直到您在布局“table”divs中添加数据表。

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

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

我可以通过指定宽度（以像素为单位）来实现此目的，但目标是使用流畅的布局来完成此操作。

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

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

Answer 1

如果

它是一个完整的页面布局，
你的标题只不过是容器（不是thead而是标题）
你的页脚只不过是容器（不是tfoot而是页脚）
页眉和页脚具有已知高度，

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

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

如果这些数据是2D中读取的数据，那么使用表格，否则是混合沙拉标记：）

如何在显示表格单元格内滚动而不是整个页面内制作100％宽度，100％高度的大表格

1 个答案: