2013-06-21 48 views
1

我想解决我的webgrids的标题在上面。所以当你滚动时,标题保持原位。MVC4 WebGrid头固定在顶部

我试过CSS。和Javascript,没有成功。

而且大多数解决方案都需要为每列已知宽度。它的一个的WebGrid,有每列没有固定的宽度..

有谁知道正确的方式做到这一点?

润通/所有的解决方案,标题甚至不与表行..

<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> 
+0

尝试使用jquery clone方法复制标题 – Andrei

+0

为什么我要复制标题? @AndreiMikhalevich – Mcloving

+0

尝试'位置:固定;' –

回答

0

尝试克隆满格与jQuery,然后删除TBODY克隆元素并将其余部分修复在页面顶部。这是我该怎么做

+0

页面上有多个表格.. – Mcloving