Home/ Questions/Q 6998695
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T20:26:38+00:00

I am dynamically generating rows of a table from the ajax response I am

  • 0

I am dynamically generating rows of a table from the ajax response I am getting. The table headers are static/constant. I am finally writing this to a div on a page.

The div has both horizontal and vertical scroll. My issue is this: If say I have 100 rows I can’t see the headers/table columns. I want to make it like freeze pane in excel, where you can see the headers/columns.

I tried separating the headers/columns from the rows but the issue I face is wide, i.e. the row td size doesn’t match up to the headers. Here’s my code (sample code):

I want to make it work in IE7 and Firefox.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> Some Page </title>
       <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
     </head>

     <body>
      <div id="dataDiv" style="white-space:nowrap; overflow-y:scroll; height:330px;overflow: scrollbars-vertical;overflow-x:scroll; width:100%;overflow: scrollbars-horizontal;">
     </body>
    </html>


    <script>


    function ProcessResponse(ajaxResponseData) 
    {

        var dataList = ajaxResponseData.somDataList;



        if(dataList != null)
        {

            var rowData = "<table border='1'  width=1200px>";
            rowData += "<tr>"           
                + "<td colspan='6'><b>Header1</b></td>"
                + "<td colspan='4'><b>Header2</b></td>"
                + "<td colspan='4'><b>Header3</b></td>"
                + "<td colspan='4'><b>Header4</b></td>"
                + "<td colspan='4'><b>Header5</b></td>"
                + "<td colspan='4'><b>Header6</b></td>"
                + "<td colspan='4'><b>Header7</b></td>"
                + "<td colspan='4'><b>Header8</b></td>"
                + "<td colspan='4'><b>Header9</b></td>"
                + "<td colspan='4'><b>Header10</b></td>"
                + "<td colspan='4'><b>Header11</b></td>"
                + "<td colspan='4'><b>Header12</b></td>"
                + "<td colspan='4'><b>Header13</b></td>"
                +"</tr>";




            for(var i=0;i<dataList.length;i++)
            {
                var someRowData=new Object();
                someRowData = dataList[i];


                rowData+="<tr>"             
                +"<td colspan='6'>"
                +someRowData.Header1_data+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
                +"</td><td colspan='4'>"
                +someRowData.Header2_data
                +"</td><td colspan='4'>"
                +someRowData.Header3_data
                +"</td><td colspan='4'>"
                +someRowData.Header4_data
                +"</td>" 
                +"</td><td colspan='4'>"
                +someRowData.Header5_data
                +"</td>" 
                +"</td><td colspan='4'>"
                +someRowData.Header6_data
                +"</td>" 
                +"</td><td colspan='4'>"
                +someRowData.Header7_data
                +"</td>" 
                +"</td><td colspan='4'>"
                +someRowData.Header8_data
                +"</td>" 
                +"</td><td colspan='4'>"
                +someRowData.Header9_data
                +"</td>" 
                +"</td><td colspan='4'>"
                +someRowData.Header10_data
                +"</td>" 
                +"</td><td colspan='4'>"
                +someRowData.Header11_data
                +"</td>" 
                +"</td><td colspan='4'>"
                +someRowData.Header12_data
                +"</td>" 
                +"</td><td colspan='4'>"
                +someRowData.Header13_data  
                +"</tr>";
            }
            rowData+="</table>";


            var dataDiv=document.getElementbyId("dataDiv");

            if(dataList.length == 0)
            {

                dataDiv.innerHTML="";
            }   
            else    
            {           
                dataDiv.innerHTML=rowData;
            }   

        }

    }
    </script>

Please help. Your help will be appreciated. Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What you need to do is set overflow: auto; to the tbody element rather than your div (and keep your th elements in a thead element). This won’t work (without some tweaking/hacking) in anything but Firefox though (maybe Opera as well – not sure). Check the link @smnbss provided and you should probably solve it. The biggest problem is that you have to set fixed width’s to all your cells if you want it to work in all the browsers.

    • 0