Member Avatar for sarikahit

Hi Everyone
I am developing a website. In that i used Gridview with a lot number of column with header text manually using boundfield.I put the Horizontal and Vertical scrollbar using css code. But I would like constant header when i scroll vertically but the header will be scroll horizontally to see the last column. In this situation , the first two column will be freeze.Please help me in this regard. Thanks to you All.

Edited by kvprajapati because: Remove [b] tag.
  • 3 Contributors
  • 3 Replies
  • 479 Views
  • 3 Years Discussion Span
  • Latest Post Latest Post by KolkataAloy

Dani AI

Generated

This thread wants two behaviors at once: the header stays visible when you scroll vertically (but still scrolls left/right with the table), and the left two columns stay visible while the rest of the table scrolls horizontally. raised the original request, pointed to another thread with a jQuery approach, and noted CSS solutions that behaved differently across browsers. A modern, simple, cross‑browser approach is to put the rendered GridView table inside a scrollable wrapper and use CSS position: sticky for the header row and for the left columns; when columns have dynamic widths, use a small JS step to compute left offsets.

Core steps (summary):

  • Wrap the GridView table in a fixed-height container with overflow:auto so that the table itself is the scroll container.
  • Make header cells sticky with position:sticky; top:0; z-index: and a solid background so the header stays visually on top when scrolling vertically.
  • Make the first and second column cells sticky with position:sticky; left:0 and left: <width of col1>, respectively, and give them a z-index below the header but above normal cells. Keep explicit column widths or compute left offsets with JS if widths vary.

Example CSS (adjust widths to your GridView or compute them in JS):

.gridWrap { max-height: 400px; overflow: auto; }
.gridWrap th { position: sticky; top: 0; background: #fff; z-index: 4; }
.gridWrap th:first-child, .gridWrap td:first-child {
  position: sticky; left: 0; background: #fff; z-index: 3;
}
.gridWrap th:nth-child(2), .gridWrap td:nth-child(2) {
  position: sticky; left: 120px; background: #fff; z-index: 3;
}

If widths are not known beforehand, compute cumulative left offsets at load/resize (set each sticky cell’s left to the sum of preceding column widths). Common pitfalls: position: sticky only works relative to the scroll container (the wrapper), transforms/filters on ancestors can break stickiness, and sticky elements must have opaque backgrounds and proper z-index to avoid overlap issues. For old IE-only support you’ll need a JavaScript fallback (duplicate header/columns or use a table plugin that provides fixed columns), but for current browsers the CSS+small JS approach is simpler and performs well.

Recommended Answers

All 3 Replies

Member Avatar for sarikahit

I'll try this code and see what happens.

Thank you very much for your advices!!

Member Avatar for KolkataAloy

Hi All,
I also tried that solution but didnt get any result..can you please check and let me know how to freeze column using jquery?
and i already implement the header and column freezing using css but it is working only in IE not in other browser..please tell meis there any solution so that csswill start working in other browser specially mozilla

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.