表格table水平自適應(yīng)，可以設(shè)置寬度100%
表格table垂直自適應(yīng)，需要設(shè)置表格的高度，根據(jù)高度，表格的垂直滾動條會自動的顯示和隱藏
垂直滾動條，需要設(shè)置指定的高度，當table的高度超過這個高度時，就會出現(xiàn)垂直滾動條
頁面的元素都是分塊的，tab、search、title、button、table等模塊，頁面和頁面上的元素也是不一樣的，需要jQuery獲取高度

// 頁面初始化 $(function () {var webHeight = window.innerHeight;var tabHeight = $('.tabStyle').innerHeight();var searchHeight = $('.searchStyle').innerHeight();var titleHeight = $('.toolTitleStyle').innerHeight();var toolHeight = $('.toolStyle').innerHeight();var pageHeight = $('.pagefooterStyle').innerHeight();if (tabHeight == null) {tabHeight = 0;}if (searchHeight == null) {searchHeight = 0;}if (titleHeight == null) {titleHeight = 0;}if (toolHeight == null) {toolHeight = 0;}if (pageHeight == null) {pageHeight = 0;}var height = webHeight - tabHeight - searchHeight - titleHeight - toolHeight - pageHeight - 8;var table = $('.listTableStyle');if (table != null) {$('.listTableStyle').css("height", height);} });// 瀏覽器改變大小 $(window).resize(function () {var webHeight = window.innerHeight;var tabHeight = $('.tabStyle').innerHeight();var searchHeight = $('.searchStyle').innerHeight();var titleHeight = $('.toolTitleStyle').innerHeight();var toolHeight = $('.toolStyle').innerHeight();var pageHeight = $('.pagefooterStyle').innerHeight();if (tabHeight == null) {tabHeight = 0;}if (searchHeight == null) {searchHeight = 0;}if (titleHeight == null) {titleHeight = 0;}if (toolHeight == null) {toolHeight = 0;}if (pageHeight == null) {pageHeight = 0;}var height = webHeight - tabHeight - searchHeight - titleHeight - toolHeight - pageHeight - 8;var table = $('.listTableStyle');if (table != null) {$('.listTableStyle').css("height", height);} });

總結(jié)

以上是生活随笔為你收集整理的jQuery控制表格垂直滚动条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。