修复了 IE8 中 GridView 上带有滚动条的表头答案

【问题标题】：Fixed Table Header with Scrollbars On GridView in IE8修复了 IE8 中 GridView 上带有滚动条的表头
【发布时间】：2012-04-05 10:15:02
【问题描述】：

我正在尝试在现有的 GridView 子类 SGridView 中实现固定标题功能。

我的问题是，使用下面列出的解决方案，滚动条出现在标题行下方，看起来很俗气。我希望滚动条垂直穿过页眉到页脚。唯一的问题是这意味着前几行将被标题覆盖，因为滚动条高度没有考虑包含标题行（我认为这是绝对定位的副作用）。关于如何纠正的任何想法？

我的解决方案包括以下内容：

<div class="IEScrollDiv">
 <table class="GridView">
   <thead>
     <tr> <th clas="GVHeader"> my header row</th> </tr>
   </thead>
   <tbody>
     ...
   </tbody>
 </table>
</table>

或多或少，在 Render() 方法中添加了额外的代码，以将表格包装在可以滚动的 div 中。没什么太花哨的。然后我将表格配置为呈现、和标签以实现可访问性。

由于在 IE 中未定义向 tbody 添加滚动，因此我无法利用它来创建固定标题（蹩脚）。此外，表达式 css 规则已从 IE8 中弃用，因此我也无法使用该方法（网上很多教程都在使用它）。

所以，我添加了 javascript 来绝对定位标题行，通过它的类 GVHeader。

谢谢

【问题讨论】：

也许在滚动 div 中添加底部边距 .. 然后将标题行移动到边距区域？？？

标签： jquery asp.net gridview

【解决方案1】：

对于那些可能最终想要实现类似的东西的人，我想我会发布我的解决方案。

我无法获得我想要的确切外观（滚动条穿过标题，而是在它旁边）。

我只是让 gridview 渲染一个空的 div，上面有一个类，使它高 x 个像素，以包含标题的间隙空间。然后只需将标题重新定位在该 div 的顶部。现在滚动条将标题行作为高度的一部分。

所以标记最终看起来像这样

<div class="IEScrollDiv">
 <div class="EmptyDiv"></div>
 <table class="GridView">
   <thead>
     <tr> <th clas="GVHeader"> my header row</th> </tr>
   </thead>
   <tbody>
     ...
   </tbody>
 </table>
</table>

.EmptyDiv
{
    height: 33px;
    margin: 0;
    padding: 0;
    background: #ffffff;
}

【讨论】：