兩個table實現固定表頭拖動時僅限表體移動
編輯：CSS詳解
剛開始接觸ASP.Net，經理就讓給以前的一個項目做固定表頭，顧名思義，就是在一個表中，表頭固定，在拖動滾動條時，僅限表體移動，但是當橫向拖動滾動條時，表頭也會跟隨表體一起移動，就是以下效果：
我采用了兩個table的方式，就是將表頭放進一個table中，將表體放入一個table中，這樣就可以靈活的操縱滾動條了
復制代碼代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.ASPx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
<html XMLns="http://www.w3.org/1999/xHtml">
<head>
<title></title>
<style type="text/CSS">
.Box{ overflow:hidden;}
.tableBox{ height:200px; width:200px; position:relative; overflow-x:auto; overflow-y:hidden;table-layout:fixed; }
.tablehead{ position:absolute; width:300px; left:0;}
.tablebody{ position:absolute; width:300px; height:200px; overflow-y:auto; overflow-x:hidden; top:20px; left:0;}
td{ width:88px;white-space:normal;}
table{border-collapse: collapse; border-spacing: 0;margin-left: 5px;margin-right: 5px;table-layout:fixed;}
</style>
</head>
<body>
<div class="Box">
<div class="tableBox" >
<div class="tablehead">
<table class="head" border="1px">
<tr>
<td>姓名</td><td>性別</td><td>年齡</td>
</tr>
</table>
</div>
<div class="tablebody">
<table class="body" border="1px" >
<tr><td>小明的地地道道的地地道道的</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
</table>
</div>
</div>
</div>
</body>
</Html>
其中有有三個div，最外側一個，控制全局，一個控制表頭，一個控制表身。有以下幾點注意：
1.最外側的div，需要用overflow-x來控制最橫向滾動，因為overflow-x、y在IE中存在兼容性問題，當overflow-x/overflow-y其中之一被設置成'scroll'、'auto'、'hidden'時，另一個還是'visible'，不會被設置為'auto' 所以，最好使用 "overflow-x:scroll; overflow-y:auto",這時候，右邊的在需要時才會顯示。如果希望右邊的滾動條一直不顯示，那麼，可以使用："overflow-x:scroll; overflow-y:hidden;"
2.表頭和表體的各列需要對齊，所以可以用table-layout:fixed;來固定寬度
3.當用table-layout:fixed;固定了列寬度，也就會有長的內容會顯示不全，那麼可以用white-space:normal;來進行換行
我采用了兩個table的方式，就是將表頭放進一個table中，將表體放入一個table中，這樣就可以靈活的操縱滾動條了
復制代碼代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.ASPx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
<html XMLns="http://www.w3.org/1999/xHtml">
<head>
<title></title>
<style type="text/CSS">
.Box{ overflow:hidden;}
.tableBox{ height:200px; width:200px; position:relative; overflow-x:auto; overflow-y:hidden;table-layout:fixed; }
.tablehead{ position:absolute; width:300px; left:0;}
.tablebody{ position:absolute; width:300px; height:200px; overflow-y:auto; overflow-x:hidden; top:20px; left:0;}
td{ width:88px;white-space:normal;}
table{border-collapse: collapse; border-spacing: 0;margin-left: 5px;margin-right: 5px;table-layout:fixed;}
</style>
</head>
<body>
<div class="Box">
<div class="tableBox" >
<div class="tablehead">
<table class="head" border="1px">
<tr>
<td>姓名</td><td>性別</td><td>年齡</td>
</tr>
</table>
</div>
<div class="tablebody">
<table class="body" border="1px" >
<tr><td>小明的地地道道的地地道道的</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
<tr><td>小明</td><td>男</td><td>12</td></tr>
</table>
</div>
</div>
</div>
</body>
</Html>
其中有有三個div，最外側一個，控制全局，一個控制表頭，一個控制表身。有以下幾點注意：
1.最外側的div，需要用overflow-x來控制最橫向滾動，因為overflow-x、y在IE中存在兼容性問題，當overflow-x/overflow-y其中之一被設置成'scroll'、'auto'、'hidden'時，另一個還是'visible'，不會被設置為'auto' 所以，最好使用 "overflow-x:scroll; overflow-y:auto",這時候，右邊的在需要時才會顯示。如果希望右邊的滾動條一直不顯示，那麼，可以使用："overflow-x:scroll; overflow-y:hidden;"
2.表頭和表體的各列需要對齊，所以可以用table-layout:fixed;來固定寬度
3.當用table-layout:fixed;固定了列寬度，也就會有長的內容會顯示不全，那麼可以用white-space:normal;來進行換行
相關文章
小編推薦
熱門推薦