页眉和页脚固定，内容滚动

我创建了this fiddle来显示我的问题在哪里。我想要的是在320 * 480屏幕上有一个固定的标题位置和一个固定的页脚位置。页眉和页脚固定，内容滚动

内容应该可滚动，以便设置的宽度和高度不会改变。

谢谢。

来源

2010-11-17 brumbles

切记要Brandons答案“答案”。 – 2011-05-25 08:01:28

设置内容div的高度和宽度;溢出：滚动;

来源

2010-11-17 13:01:10 Mauro

http://jsfiddle.net/vJGua/13/

你只需要你的“内容” div来的高度，并在风格overflow: auto;集。

来源

2010-11-17 13:04:06

溢出：auto是它。非常感谢。 – brumbles 2010-11-17 13:05:10

我曾经与类似的问题一段时间，但有浏览器兼容性问题。我终于写了jQuery来将头行分割成一个单独的表，然后匹配列宽。最终结果是两个表格看上去是一个，其中内容是可滚动的，并且标题是固定的。这并不像我希望的那样优雅，但它似乎具有很好的跨浏览器兼容性。

我的标记

<table id="MyHeader"></table> 

<div style="overflow-y: auto; height: 330px;"> 

    <table id="MyDataRows"> 

    <thead> 
     <tr class="grid_header"> 
     <th>Col1</th> 
     <th>Col2</th> 
     <th>Col3</th> 
     </tr> 
    </thead> 

    <tbody> 
     <tr> 
     <td>Data</td> 
     <td>Data</td> 
     <td>Data</td> 
     </tr> 
    </tbody> 
    </table> 

</div>

我的jQuery

<script type="text/javascript">// <![CDATA[ 
$(function() { 
    /* move the table header from the datagrid outside, so it doesn't scroll" */ 
    $("#MyHeader").append($("#StudentData thead")); 
    $("#MyDataRows").css("margin-bottom", "0"); 

    var ths = $("#MyHeader th"); 
    var tds = $("#MyDataRows tr:first td"); 

    /* Reset the padding of the th's to match the td's */ 
    ths.css("padding-left", tds.first().css("padding-left")); 
    ths.css("padding-right", tds.first().css("padding-right")); 

    /* Set the widths of all the th's (except the last to acccount for scroll bar) to the corresponding td width */ 
    for (var i = 0; i < tds.length - 1; i++) { 
     ths.eq(i).width(tds.eq(i).width()); 
    } 
});

这可以很容易地适应两个页眉和页脚。

更全面的解释，请参阅我下面的帖子在这里：Scrollable DataGrid table with Fixed Header with jQuery

来源

2011-12-09 14:20:45 Narnian

页眉和页脚固定，内容滚动

回答

相关问题