溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

兩個(gè)table如何實(shí)現(xiàn)固定表頭拖動(dòng)時(shí)僅限表體移動(dòng)

發(fā)布時(shí)間：2021-09-29 17:17:59 來(lái)源：億速云 閱讀：109 作者：小新 欄目：web開(kāi)發(fā)

小編給大家分享一下兩個(gè)table如何實(shí)現(xiàn)固定表頭拖動(dòng)時(shí)僅限表體移動(dòng)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

剛開(kāi)始接觸asp.net，經(jīng)理就讓給以前的一個(gè)項(xiàng)目做固定表頭，顧名思義，就是在一個(gè)表中，表頭固定，在拖動(dòng)滾動(dòng)條時(shí)，僅限表體移動(dòng)，但是當(dāng)橫向拖動(dòng)滾動(dòng)條時(shí)，表頭也會(huì)跟隨表體一起移動(dòng)，就是以下效果：

兩個(gè)table如何實(shí)現(xiàn)固定表頭拖動(dòng)時(shí)僅限表體移動(dòng) 

我采用了兩個(gè)table的方式，就是將表頭放進(jìn)一個(gè)table中，將表體放入一個(gè)table中，這樣就可以靈活的操縱滾動(dòng)條了

代碼如下:


<%@ 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>


其中有有三個(gè)div，最外側(cè)一個(gè)，控制全局，一個(gè)控制表頭，一個(gè)控制表身。有以下幾點(diǎn)注意：

1.最外側(cè)的div，需要用overflow-x來(lái)控制最橫向滾動(dòng)，因?yàn)閛verflow-x、y在IE中存在兼容性問(wèn)題，當(dāng)overflow-x/overflow-y其中之一被設(shè)置成'scroll'、'auto'、'hidden'時(shí)，另一個(gè)還是'visible'，不會(huì)被設(shè)置為'auto' 所以，最好使用 "overflow-x:scroll; overflow-y:auto",這時(shí)候，右邊的在需要時(shí)才會(huì)顯示。如果希望右邊的滾動(dòng)條一直不顯示，那么，可以使用："overflow-x:scroll; overflow-y:hidden;"

2.表頭和表體的各列需要對(duì)齊，所以可以用table-layout:fixed;來(lái)固定寬度

3.當(dāng)用table-layout:fixed;固定了列寬度，也就會(huì)有長(zhǎng)的內(nèi)容會(huì)顯示不全，那么可以用white-space:normal;來(lái)進(jìn)行換行

以上是“兩個(gè)table如何實(shí)現(xiàn)固定表頭拖動(dòng)時(shí)僅限表體移動(dòng)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手