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..

Answer 1

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.