用css實現GridView的固定表頭和列

這裡用css實現gridview固定表頭和列需要使用div重疊，以及兩個div滾動條同時滾動的方法。

一、div重疊方法：

外層用relative相對定位，裡面用absolute絕對定位，就能很好的實現你的要求了。z-index是用來控制div的顯示優先級別。

如下的乙個html例項：

111111111111111

222222222

33333

效果如下圖：表明a1、a2、a3三個div的內容重疊了

可以依次將a3、a2刪除檢視效果就能更明白了。

或者將a2內容加個換行，a3內容加兩個換行，**如下：

1111111111111111111

222222222

33333

效果如下圖：表明a1、a2、a3三個div的內容重疊了，看到這裡應該明白了。

二、鎖定表頭和列的方法就是這個思路：

1、第一步：

重疊三個div：a1、a2、a3中分別放置三個gridview，資料來源一樣，樣式也一樣。a1設定好寬度=620，高度=500，其中a2的高度與gridview的表頭高度相等，寬度=600（比a1少的20是滾動條的寬度），a3的寬度與gridview要固定的列的寬度相等，高度=500（比a1少的20是滾動條的寬度），a2、a3隱藏滾動條，此時允許，可以看到乙個完整的gridview資料顯示，並帶有垂直和水平。但是移動滾動條，表頭和要固定的列沒有移動。

2、第二步：

設定a1水平滾動條移動，a2的水平滾動條也同時移動；設定a1垂直滾動條移動，a3的垂直滾動條也同時移動。

**如下：

其中：scrollleft 代表水平滾動條；scrolltop代表垂直滾動條

三、例項

前端**：

@page

language

="c#"

autoeventwireup

="true"

codefile

="fixgridviewheadcolumn.aspx.cs"

inherits

="fixgridviewheadcolumn"

%>

doctype

html

public

"-//w3c//dtdxhtml 1.0 transitional//en"

"">

<

html

xmlns

="">

<

head

runat

="server">

<

title

>固定gridview表頭和列

title

>

<

style

type

="text/css">

body

#div1 

#a1#a2

#a3style

>

head

>

<

body

>

<

form

id="form1"

runat

="server">

<

divid

="div1">

<

divid

="a1"

onscroll

="document.getelementbyid('a2').scrollleft =this.scrollleft;document.getelementbyid('a3').scrolltop=this.scrolltop;">

<

asp:

gridview

id="gridview1"

runat

="server"

width

="1000px"

height

="500px">

asp:

gridview

>

div>

<

divid

="a2"

>

<

asp:

gridview

id="gridview2"

runat

="server"

width

="1000px"

height

="500px">

asp:

gridview

>

div>

<

divid

="a3"

>

<

asp:

gridview

id="gridview3"

runat

="server"

width

="1000px"

height

="500px">

asp:

gridview

>

div>

div>

form

>

body

>

html

>

後台**：

using system;

using system.collections.generic;

using system.linq;

using system.web;

using system.web.ui;

using system.web.ui.webcontrols;

using system.data;

public

partial

class

fixgridviewheadcolumn: system.web.ui.page

gridview1.datasource = dt;

gridview1.databind();

gridview2.datasource = dt;

gridview2.databind();

gridview3.datasource = dt;

gridview3.databind();

} }

最後效果圖：

本方法用了3個gridview，雖然實現了功能，但方法很笨，還是應該找到找到簡便點的方法。

GridView 用CSS隱藏列

gridview隱藏列取值解決方案 2007 06 23 02 17 分類 asp.net 字型大小 大大 中中 小小 摘要 在asp.net 2.0中增加了乙個新的資料繫結控制項 gridview，其目的用來取代asp.net1.x中的datagrid控制項，但有一點很不爽的是，如果把某列設定為v...

GridView用CSS設定樣式

gridview是很便利的資料控制項，在mis中的應用很廣泛，其樣式編寫很簡單，但是每次新增都要重新編寫，工作很是煩瑣，而且由於其本身的特性，樣式並不好編寫，最好的辦法就是在單雙行 header pager footer等欄目引用單獨的樣式，如下 抱歉，暫時沒有資料！各樣式如下 gridview 樣...

用GridView實現無限級巢狀

onrowdatabound事件,與.x中的itemdatabound有一腿.container.dataitem.tostring container.dataitem.tostring container.dataitem.tostring cs rowdatabound與.x中的itemdat...