兩個table實現(xiàn)固定表頭拖動時僅限表體移動
發(fā)布時間：2014-05-12 11:08:01 作者：佚名 
我要評論
我要評論固定表頭，顧名思義，就是在一個表中，表頭固定，在拖動滾動條時，僅限表體移動，但是當橫向拖動滾動條時，表頭也會跟隨表體一起移動，下面一起看看是如何實現(xiàn)的
剛開始接觸asp.net，經(jīng)理就讓給以前的一個項目做固定表頭，顧名思義，就是在一個表中，表頭固定，在拖動滾動條時，僅限表體移動，但是當橫向拖動滾動條時，表頭也會跟隨表體一起移動，就是以下效果：
我采用了兩個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，最外側(cè)一個，控制全局，一個控制表頭，一個控制表身。有以下幾點注意：
1.最外側(cè)的div，需要用overflow-x來控制最橫向滾動，因為overflow-x、y在IE中存在兼容性問題，當overflow-x/overflow-y其中之一被設(shè)置成'scroll'、'auto'、'hidden'時，另一個還是'visible'，不會被設(shè)置為'auto' 所以，最好使用 "overflow-x:scroll; overflow-y:auto",這時候，右邊的在需要時才會顯示。如果希望右邊的滾動條一直不顯示，那么，可以使用："overflow-x:scroll; overflow-y:hidden;"
2.表頭和表體的各列需要對齊，所以可以用table-layout:fixed;來固定寬度
3.當用table-layout:fixed;固定了列寬度，也就會有長的內(nèi)容會顯示不全，那么可以用white-space:normal;來進行換行
我采用了兩個table的方式，就是將表頭放進一個table中，將表體放入一個table中，這樣就可以靈活的操縱滾動條了
復(fù)制代碼
代碼如下:<%@ 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，最外側(cè)一個，控制全局，一個控制表頭，一個控制表身。有以下幾點注意：
1.最外側(cè)的div，需要用overflow-x來控制最橫向滾動，因為overflow-x、y在IE中存在兼容性問題，當overflow-x/overflow-y其中之一被設(shè)置成'scroll'、'auto'、'hidden'時，另一個還是'visible'，不會被設(shè)置為'auto' 所以，最好使用 "overflow-x:scroll; overflow-y:auto",這時候，右邊的在需要時才會顯示。如果希望右邊的滾動條一直不顯示，那么，可以使用："overflow-x:scroll; overflow-y:hidden;"
2.表頭和表體的各列需要對齊，所以可以用table-layout:fixed;來固定寬度
3.當用table-layout:fixed;固定了列寬度，也就會有長的內(nèi)容會顯示不全，那么可以用white-space:normal;來進行換行
相關(guān)文章
這篇文章主要介紹了html Table 表頭固定的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2019-01-22利用純css實現(xiàn)table固定列與表頭中間橫向滾動的思路和實例
這篇文章主要給大家介紹了關(guān)于如何利用純css實現(xiàn)table固定列與表頭，中間橫向滾動的相關(guān)資料，文中通過示例代碼詳細的給大家介紹了關(guān)于實現(xiàn)該效果的思路與方法，對大家的學(xué)2017-09-11html css 控制div或者table等固定在指定位置的實現(xiàn)方法
下面小編就為大家?guī)硪黄猦tml css 控制div或者table等固定在指定位置的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-06-13固定 table寬度 table-layout: fixed
如果單元格中的文本超過寬度限制，就會自動換行，高度自動增高，導(dǎo)致整個表格的樣式參差不齊，不過可以通過禁用文本換行來解決這個問題2014-05-15- 頁面中table寬度設(shè)置width之后，寬度仍然不是固定的，文字太長后不換行，下面有個不錯的方法可以有效解決這個問題2014-02-17
- 在某些時候會實現(xiàn)如這樣的效果：固定Table第一行或某幾行不隨滾動條滾動而滾動，示例代碼如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-07
html固定標題列、標題頭table具體實現(xiàn)代碼
為了布局的美觀度需要在html中固定標題列、標題頭，本文整理了一些相關(guān)實現(xiàn)技巧，經(jīng)測試還不錯，感興趣的朋友可以參考下哈，希望對你有所幫助2013-04-26css固定table表頭的實現(xiàn)代碼可同時看到表頭和表格底部
一次性將數(shù)據(jù)全部顯示出來，頁面就會出現(xiàn)滾動條，這樣的話就不能同時看到表頭信息和表格底部的數(shù)據(jù)記錄,把表頭固定可以解決此問題2012-12-13
這篇文章主要介紹了html中table固定頭部表格tbody可上下左右滑動，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小2020-07-30
