фиксированный верхний и нижний колонтитул, содержание прокручивается

Question

Я создал this fiddle, чтобы показать, где моя проблема. Я хочу иметь фиксированное положение заголовка и фиксированное положение нижнего колонтитула на экране 320 * 480.

Содержимое должно быть прокручиваемым, чтобы ширина и высота набора не изменялись.

Спасибо.

Answer 1

Установить содержание div высота и ширина; переполнение: прокрутка;

Answer 2

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

Вам просто нужно свой «контент» DIV, чтобы иметь высоту и overflow: auto; набор в стиле.

Answer 3

Я работал с подобной проблемой на некоторое время, но имел проблемы совместимости с браузером. Наконец, я закончил писать jQuery, чтобы разбить строки заголовков на отдельную таблицу, а затем сопоставить ширину столбца. Конечным результатом является две таблицы, которые выглядят как одна, где контент прокручивается, а заголовок фиксирован. Это не так элегантно, как хотелось бы, но, похоже, у него хорошая совместимость между браузерами.

Мои Markup

<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