Large HTML Table with Fixed Header inside Scrollable Div. How?

♀尐吖头ヾ 提交于 2019-12-01 11:14:08

There's also a pure CSS solution out there (with some pro's and con's) that involves wrapping the <th> contents in a div set to position: absolute.

You can go with easy and obvious way of putting headers in one DIV, and then the rows in another div. The div containing rows would have fixed height and overflow set to scroll/auto

You can also write a quick function doing this for you with jQuery

function fixedHeader(table)
{
    var header = table.find("thead").html();
    var body = table.find("body").html();
    // add <table> tags to both header and body or the containers
    $("#yourHeaderContainer").html(header);
    $("#yourContentContainer").html(body);
    table.hide();
}

it's of course not complete solution and just one of many ways - but I guess it will give you food for though

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!