溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下兩個table如何實現固定表頭拖動時僅限表體移動，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
剛開始接觸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如何實現固定表頭拖動時僅限表體移動”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
