IE11に対応しないなら、position:stickyを使えばcssのみで実現できる。
IE11に対応する場合は上記の方法がブラウザ対応していないので、以下のようにしてタイトル行を固定する。
・GridViewはタイトル行をthaed要素にする
・GridViewは、スクロールバーを表示するdivの子要素として作成する
・ページ表示後に、「タイトル行表示用の領域」にタイトル行を移動させる
・スクロールバーでGridViewの表示がスクロールしたとき、タイトル行も連動して動くようにスクリプトを書く
※以下のコードは、概要としては合っているが実際動かしたコードではないので動かないかも。(実際動かしたやつはもっと複雑なので単純化して書いた)
aspx.vb
Private Sub grdList_RowCreated(sender As Object, e As GridViewRowEventArgs) Handles grdList.RowCreated
'GridViewはタイトル行をthaed要素にする
Select Case e.Row.RowType
Case DataControlRowType.Header
e.Row.TableSection = TableRowSection.TableHeader
Case DataControlRowType.DataRow
e.Row.TableSection = TableRowSection.TableBody
Case DataControlRowType.Footer
e.Row.TableSection = TableRowSection.TableFooter
End Select
End Sub
aspx
<div id="table_header" style="overflow:hidden; width:800px;"><!-- タイトル行表示用の領域 --></div>
<div id="table_body" style="overflow:auto; width:800px; height:300px;">
<!-- この中の要素はtable_bodyのスクロールバーでスクロール表示される -->
<asp:GridView ID="grdList" runat="server" Width="2000px">
<Columns>
<asp:BoundField DataField="name" HeaderText="タイトル">
<HeaderStyle Width="300px" /><ItemStyle Width="300px" /> <!-- 別テーブルに分かれるので、ヘッダ、アイテムの両方に幅指定が必要 -->
</asp:BoundField>
...
</Columns>
</asp:GridView>
</div>
<script>
$(function() {
// タイトル行固定用の別テーブルへ、タイトル行を移動
$("#table_header").append("<table></table>");
$("#table_header table").width($("#table_body table").width());
$("#table_body table thead").appendTo("#table_header table");
// 横スクロール時に、タイトル行も連動してスクロールするように設定
$("#table_body").on("scroll", function () {
$("#table_header table").css("margin-left", -this.scrollLeft);
});
});
</script>