Question

我创建了this fiddle以显示我的问题所在。我想要的是在320 * 480屏幕中有一个固定的标题位置和固定的页脚位置。

内容应该是可滚动的，这样设置的宽度和高度就不会改变。

感谢。

Answer 1

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

您只需要在您的“内容”div中设置高度并在样式中设置overflow: auto;。

Answer 2

我曾经遇到类似的问题，但有浏览器兼容性问题。我最终写了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

Answer 3

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

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

3 个答案: