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>