Home/ Questions/Q 8270989
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T06:44:00+00:00

I’m trying to create a datagrid table that will allow me to fix the

  • 0

I’m trying to create a datagrid table that will allow me to fix the header. I have placed the table within two DIV elements and fixed the THEAD portion of the table. I populate the table dynamically and there can be a different number of columns and may have different widths each time.

<DIV style="position: relative; width="500px">
 <DIV style="height:105px; overflow: auto;">
  <TABLE width="502px">
    <THEAD>
      <TR style="left:-1px;top: 0;position: absolute;">
        ... header content ...
      </TR>
    </THEAD>
    <TBODY>
      ... data columns ...
    </TBODY>
  </TABLE>
 </DIV>
</DIV>

The solution works well for the vertical overflow. However, I’m struggling with the horizontal overflow. Because I fixed the THEADs TR element, if my table exceeds the DIV width, the horizontal scrollbar appears and I can scroll the data horizontally, but the titles are static and don’t scroll.

I was thinking that I might be able to somehow scroll the table header using jQuery if I could get the id/name of the dynamically created scrollbar, but I don’t know if this is the right solution or if it is even possible.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A ton of people have tried to make fixed headers and left columns for tables using html and css, that stay put while you scroll, and unfortunately it doesn’t work.

    Your only option is to use javascript to manipulate the table as it scrolls. I have no specific code to recommend, but do some google searches.

    • 0