MVC4 Заголовки WebGrid Исправлено сверху

Question

Я пытаюсь исправить заголовки моих вебгридов сверху. Поэтому при прокрутке заголовки остаются на месте.

Я пробовал CSS. И Javascript, без успеха.

И большинство решений требуют известной ширины для каждого столбца .. Его WebGrid, нет фиксированной ширины в колонке ..

Кто-нибудь знает, как правильно это сделать?

Alot/Все решения, заголовки даже не в соответствии с таблицей ..

<script type="text/javascript"> 
     $(document).ready(function() { 
      $("#GridHeader").html("<table>" + $('#gridContent table thead').html() + "</table>"); 
      $("#GridHeader table tr:first").append("<th style='width:12px;' ></th>"); 
      $("#GridBody").html("<table>" + $('#gridContent table tbody').html() + "</table>"); 
      $("#GridFooter").html("<table>" + $('#gridContent table tfoot').html() + "</table>"); 
      $("#gridContent").hide(); 
     }); 

<style type="text/css"> 
.colWidth { width: 200px; } 
#GridBody{width: 100% ;height:200px; overflow: auto; } 
#GridHeader table {width: 100%; margin-top: 0px; padding:0px; border-collapse:collapse; } 
#GridFooter {width: 100% ; } 
#GridHeader table th { width: 10%; border: 2px solid black;} 
.title td, .title th { width: 10%; border: 2px solid black;} 
#GridBody td { width: 10%; border: 2px solid black;} 
</style> 

<div id="Outer" > 
<div id="GridHeader" class="title"></div> 
<div id="GridBody"></div> 
<div id="GridFooter"></div> 
</div> 

Answer 1

Попытка клонировать полную сетку с JQuery, а затем удалить из TBODY клонированный элемент и зафиксировать оставшуюся часть поверх страницы. Вот как бы я это сделал