fixed headers for webgrid, asp.net mvc3 razor

Question

i had an panel in my project in which there was an webgrid. There was an maximise functionality for the panel so i had given webgrid width and height as 100% as it varies in width and height. And i am displaying 20 rows in the webgrid and scroll appears fine... Now my requirement is my headers should be fixed and user can able to scroll the content.. I had refered various blogs. In some blogs there was given that we have to give fixed width for "th" and "td" elements but it not possible in my scenario( as i had given widths in %'s wise). For example

  grid.Column("EquipmentManfacturer", header: "Warranty Provider", style: "column5"),

 <style type="text/css">

.column5
 {
     width: 25%;
 }

</style>

And in some other blogs they had given to give css style for "th" elements as "display: block" But this does not solve my problem. Can any one please help me to find a solution..

McGarnagle · Accepted Answer · 2012-04-17 06:14:02Z

3

Just have to make the table head a fixed position, limit the table's height and set overflow to "scroll". To do this add the following CSS to your page:

table { display: inline-block; height: 200px; overflow-y: scroll; }
thead { position: fixed; margin-top: -30px; }

It will take a bit of tweaking to get the layout right.

answered Apr 17, 2012 at 6:14

McGarnagle

103k31 gold badges235 silver badges264 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Swetha Bindu Over a year ago

Thank you for your reply. My thead is fixed but the widths of the coulmns of the theade elements vary.. The th elements does not amtch with the correct td element in tbody...

Dhwani Over a year ago

@dbaseman, I just referred ur answer. and it works but when I scroll the page, The header is fixed though I am not viewing the table i.e. it is fixed on whole page. Can you help me why that is happening?

McGarnagle Over a year ago

@djIT I think you should open a new question? It's hard to say without knowing more context.

Dhwani Over a year ago

@dbaseman, Ok. Here is my post: stackoverflow.com/questions/14825678/…

Collectives™ on Stack Overflow

fixed headers for webgrid, asp.net mvc3 razor

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related