is it possible to freeze the header row in list? We add some code so the user can scroll trough the content. The code doesn't work for the header freeze. We work with Internet Explorer 10. Have anybody a solution which works for IE10 and Sharepoint 2010?


If list doesn't contain any dynamic column one can use below script to achieve freezing header with vertical and horizontal scrolling.

Note: Tested with SharePoint 2010 only

//jquery lib
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

//style sheet
<style type="text/css">
.fixedBlock {
    POSITION: fixed; TOP: 15px

//jquery script to freeze header
<script type="text/javascript">

var leftInit;
var top;

$(document).ready(function () {
//get left and top offset of the header
leftInit = $('tr.ms-viewheadertr').offset().left;
top = $('tr.ms-viewheadertr').offset().top;

//scrolling event
$('#s4-workspace').scroll(function() {
    var x = 0 - $('#s4-workspace').scrollLeft();
    var y = $('#s4-workspace').scrollTop();
    var rowWidth = $('tr.ms-viewheadertr').width();
    if (y >= top) {
             left: x + leftInit
        $('table.ms-listviewtable').css('width', rowWidth+"px");
    } else {



The below script worked for me in SP2010.Add the script to a CEWP and place it below the list webpart and make it hidden. Kindly update your list name in the script:

<style type="text/css">
#TTNheading {
    OVERFLOW: hidden;
    HEIGHT: 28px;

#TTNlist {
    HEIGHT: 400px;
    OVERFLOW-X: auto;
    OVERFLOW-Y: scroll !important;


function TTNListScroll() {
    var SummaryName = "Enter Your List Name Here"; 
    var TTNmyTable;
    var TTNListDiv = document.createElement('div');
    var TTNHeadingDiv = document.createElement('div');
    var tables = document.getElementsByTagName("TABLE");
    for (var i = 0; i < tables.length; i++) {
        if (tables[i].summary.indexOf(SummaryName)!=-1) {
            TTNmyTable = tables[i];
    if(TTNmyTable == undefined)  {                   
    TTNHeadingDiv.id = "TTNheading";
    TTNListDiv.id = "TTNlist";
    TTNListDiv.width = "100%";
    var TTNnode = TTNmyTable.parentNode;
    TTNnode.replaceChild(TTNHeadingDiv, TTNmyTable);
    TTNListDiv.childNodes[0].rows[0].style.visibility = 'hidden';
    TTNHeadingDiv.childNodes[0].style.width = TTNListDiv.childNodes[0].offsetWidth;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.