table thead 固定 tbody滚动
生活随笔
收集整理的這篇文章主要介紹了
table thead 固定 tbody滚动
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一種簡單的方法實現
支持多行th
<!DOCTYPE html> <html><head><meta charset="UTF-8"><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" ></script></head> <style type="text/css">*{margin: 0;padding: 0;}table{width: 100%;border-collapse:collapse;}table tr th,table tr td{height: 30px;border: 1px solid #ddd;text-align: center;background: #fff;}.one{width: 100%;overflow: auto;position: relative;height: 200px;z-index: 999;}.one-one{position: absolute;}</style><body><div class="one"><table class="one-one"><thead><tr><th>1</th><th>2<br /></th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th></tr><tr><th>1</th><th>2<br /></th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th></tr></thead></table><table class="one-two"><thead><tr><th>1</th><th>2<br /></th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th></tr><tr><th>1</th><th>2<br /></th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th></tr></thead><tbody><tr><td>111111111</td><td>111111111111111111111111111</td><td>111111111111111111111111111111111111111111111</td><td>111111111</td><td>1</td><td>111111111111111111111111111111111111</td><td>11</td></tr><tr><td>111111111</td><td>111111111111111111111111111</td><td>111111111111111111111111111111111111111111111</td><td>111111111</td><td>1</td><td>111111111111111111111111111111111111</td><td>11</td></tr><tr><td>111111111</td><td>111111111111111111111111111</td><td>111111111111111111111111111111111111111111111</td><td>111111111</td><td>1</td><td>111111111111111111111111111111111111</td><td>11</td></tr><tr><td>111111111</td><td>111111111111111111111111111</td><td>111111111111111111111111111111111111111111111</td><td>111111111</td><td>1</td><td>111111111111111111111111111111111111</td><td>11</td></tr><tr><td>111111111</td><td>111111111111111111111111111</td><td>111111111111111111111111111111111111111111111</td><td>111111111</td><td>1</td><td>111111111111111111111111111111111111</td><td>11</td></tr><tr><td>111111111</td><td>111111111111111111111111111</td><td>111111111111111111111111111111111111111111111</td><td>111111111</td><td>1</td><td>111111111111111111111111111111111111</td><td>11</td></tr><tr><td>111111111</td><td>111111111111111111111111111</td><td>111111111111111111111111111111111111111111111</td><td>111111111</td><td>1</td><td>111111111111111111111111111111111111</td><td>11</td></tr><tr><td>111111111</td><td>111111111111111111111111111</td><td>111111111111111111111111111111111111111111111</td><td>111111111</td><td>1</td><td>111111111111111111111111111111111111</td><td>11</td></tr><tr><td>111111111</td><td>111111111111111111111111111</td><td>111111111111111111111111111111111111111111111</td><td>111111111</td><td>1</td><td>111111111111111111111111111111111111</td><td>11</td></tr><tr><td>111111111</td><td>111111111111111111111111111</td><td>111111111111111111111111111111111111111111111</td><td>111111111</td><td>1</td><td>111111111111111111111111111111111111</td><td>11</td></tr></tbody></table></div><script>window.οnlοad=function(){//讓由內容的table 和沒有內容的table一樣寬，th一樣高$(".one-one").width($(".one-two").width())$(".one-one thead").height($(".one-two thead").height())//實時獲取table 的寬度和th的高度$(window).resize(function(){ $(".one-one").width($(".one-two").width())$(".one-one thead").height($(".one-two thead").height())})//循環讓one-one 中的每個th 與one-two中的th高度相同$(".one-two thead tr th").each(function(i){$(".one-one thead tr th").eq(i).width($(this).width()+1);});//滾動調滾動，修改one-one的top值$(".one").scroll(function(){var top = $(this).scrollTop(); console.log(top)$(".one-one").css('top',top);})}</script></body></html>
轉載于:https://www.cnblogs.com/yjgbk/p/8890994.html
總結
以上是生活随笔為你收集整理的table thead 固定 tbody滚动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 防止重复点击
- 下一篇： CGLIB介绍与原理（通过继承的动态代理