多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

國內最全IT社區平臺 聯系我們 | 收藏本站
阿里云優惠2
您當前位置:首頁 > web前端 > htmlcss > 表頭列頭固定頁面

表頭列頭固定頁面

來源:程序員人生   發布時間:2015-02-03 08:39:30 閱讀次數:4864次


    該文章主要是寫了1個table頁面,并固定表頭或列頭,以到達excel凍結列的效果,主要使用的js的scrollTop,scrollLeft.

1.js中scrollTopscrollLeft的使用說明
scrollTop指的是“元素中的內容”超越“元素上邊界”的那部份的高度。例如:外層元素的高度值是200px,內層元素的高度值是300px。很明顯,“外層元素中的內容”高過了“外層元素”本身.當向下拖動轉動條時,有部份內容會隱沒在“外層元素的上邊界”以外,scrollTop就等于這部份“不可見的內容”的高度。
scrollLeft同上.

2.頁面示例
頁面示例代碼以下:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表頭列頭固定 -- Sara</title> <style> body{font-size:12px;} .t_n{width:30px; heihgt:240px!important; height:242px; background:buttonface; float:left; border-bottom:1px solid #000; border-left:1px solid #000} .t_n span{display:block; text-align:center; line-height:20px; border:1px solid #000; width:28px; height:20px} .t_number{border-right:1px solid #000; width:100%; margin-bottom:5px} .t_number td{border-bottom:1px solid #000; width:30px; height:25px; text-align:center} .dd{height:200px!important; height:208px; overflow-y:hidden;} .t_i{width:400px; height:auto; float:left; border-right:1px solid #000; border-top:1px solid #000} .t_i_h{width:100%; overflow-x:hidden; background:buttonface;} .ee{width:618px!important; width:620px} .t_i_h table{width:600px;} .t_i_h table td{border-right:1px solid #000; border-bottom:1px solid #000; height:20px; text-align:center} .cc{width:100%; height:220px; border-bottom:1px solid #000; border-right:1px solid #000; background:#fff; overflow:auto;} .cc table{width:600px; } .cc table td{height:25px; border-bottom:1px solid #000; border-right:1px solid #000; text-align:center} </style> <script> function aa(){ var a=document.getElementById("cc").scrollTop; var b=document.getElementById("cc").scrollLeft; document.getElementById("dd").scrollTop=a; document.getElementById("hh").scrollLeft=b; } </script> </head> <body> <div class="t_n"> <span>序號</span> <div class="dd" id="dd"> <table cellpadding="0" cellspacing="0" border="0" class="t_number"> <tbody> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> <tr> <td>4</td> </tr> <tr> <td>5</td> </tr> <tr> <td>6</td> </tr> <tr> <td>7</td> </tr> <tr> <td>8</td> </tr> <tr> <td>9</td> </tr> <tr> <td>10</td> </tr> </tbody> </table> </div> </div> <!--table--> <div class="t_i"> <div class="t_i_h" id="hh"> <div class="ee"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td width="10%">標題A</td> <td width="20%">標題B</td> <td width="10%">標題C</td> <td width="20%">標題D</td> <td width="20%">標題E</td> <td width="20%">標題F</td> </tr> </table> </div> </div> <div class="cc" id="cc" onscroll="aa()"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td width="10%">1</td> <td width="20%">1</td> <td width="10%">1</td> <td width="20%">1</td> <td width="20%">1</td> <td width="20%">1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> <td>3</td> <td>3</td> <td>3</td> </tr> <tr> <td>4</td> <td>4</td> <td>4</td> <td>4</td> <td>4</td> <td>4</td> </tr> <tr> <td>5</td> <td>5</td> <td>5</td> <td>5</td> <td>5</td> <td>5</td> </tr> <tr> <td>6</td> <td>6</td> <td>6</td> <td>6</td> <td>6</td> <td>6</td> </tr> <tr> <td>7</td> <td>7</td> <td>7</td> <td>7</td> <td>7</td> <td>7</td> </tr> <tr> <td>8</td> <td>8</td> <td>8</td> <td>8</td> <td>8</td> <td>8</td> </tr> <tr> <td>9</td> <td>9</td> <td>9</td> <td>9</td> <td>9</td> <td>9</td> </tr> <tr> <td>10</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> </tr> </table> </div> </div> </body> </html>

效果圖以下:


生活不易,碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生
------分隔線----------------------------
分享到:
------分隔線----------------------------
關閉
程序員人生
主站蜘蛛池模板: 91久久在线| 日韩一级片免费 | julia一区福利视频在线观看 | 波多野结衣在线观看一区二区 | 啪网站| 欧美第一精品 | 久久精品综合一区二区三区 | 亚洲色域网 | 性生活国产 | 国产精品免费一区二区三区四区 | 亚洲春色www| 欧美日韩精 | 精品久久伊人 | 伊人福利 | 最近最新在线中文字幕 | 亚洲欧美日韩综合在线一区二区三区 | 全网免费在线播放视频入口 | 亚洲韩精品欧美一区二区三区 | 国产精品第一 | 久久精品国产欧美日韩亚洲 | 动漫精品成人免费网站 | 我爱我色成人网 | 亚洲视频久久 | 无遮挡很爽很污很黄很色的网站 | 日本大黄毛片视频 | 日本亚洲免费 | 加勒比一道本综合 | 国产亚洲成归v人片在线观看 | 欧美另类亚洲 | 成人精品一区二区三区校园激情 | 在线播放69热精品视频 | 日韩一区二区三区四区不卡 | japanese 护士 | 最近中文字幕在线播放 | 在线观看中文字幕国产 | 国产成人精品免费视频大 | 国产精品video | 亚洲欧洲一区 | 久久免费国产精品一区二区 | 中文字幕乱码人成乱码在线视频 | 99久久精品国产一区二区成人 |