html - MVC4 WebGrid Headers Fixed on top -

I am trying to fix the headers of my webgds at the top so when you scroll, the headers are in place Are there.

I have tried CSS. And javascript, there is no success.

And most of the solutions require a known width for each column. It has a webgrid, no fixed width per column.

Do anyone know < / P>

/ javascript "& gt; $ (Document) .ready (function () {$ (" # GridHeader "). Html (" & lt; table & gt; " $ ('# Gridcontent table thead') .HTML () + "& lt; / table & gt;") $ ("# grid header table tr: first"). Attachment ("& lt; th style = 'width : 12px; 'gt; & lt; / th & gt; "); $ (" # Grid Body ") .HTML (" # Gridcontent table tbody ") .HTML () +" & lt ; / Table & gt; "); $ (" # gridfooter "). Html (" & lt; Table ";" + $ ('# GridContent table Tft ') .HTML () + "& lt; / table & gt;"); $ ("# gridcontent") Hide ();});

  & style style = "text / css" & gt; .colWidth {width: 200px; } # Gridbody {width: 100%; Height: 200px; Overflow: Auto; } # Grid Header Table {Width: 100%; Margin-top: 0 pixels; Padding: 0px; Degradation: collapse; } # Grid Footer {Width: 100%; } # Grid header table {width: 10%; Range: 2px solid black;}. Title TD. Title b (width: 10%; boundary: 2px solid black;) # Gridbody TD {width: 10%; boundary: 2px solid black;}  gt; div id = "external" & gt; ; & Lt; div id = "GridHeader" class = "title" & gt; & lt; / div & gt; & lt; div id = "gridboard" & gt; & lt; / div & gt; & lt; div Id = "gridfooter" & gt; & lt; / div & gt; & lt; / div & gt; Try to clone the complete grid with Jquery, then remove from the cloned element and fix the rest. / Code>   
 
 
 How can I do this at the top of the page