有時候在不分頁且數據多的時候就需要滾動條，或者說是下拉加載的時候也需要滾動條，但是希望在滾動的時候數據的表頭固定便於理解表體。
1. 第一種，在tbody元素上進行滾動
這種方式有個缺陷就是所有的單元格的寬度一樣，平分整個tr的寬度，不會根絕內容自適應寬度。
如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> table { border-collapse: collapse; width: 100%; text-align: left; border:1px solid #000; } td,th{ border:1px solid #000; } tbody{ display: block; overflow-x: hidden; overflow-y: auto; height: 100px; } thead,tbody tr{ display: table; width: 100%; table-layout: fixed; word-break: break-all; } table thead{ width: calc(100% - 17px); } </style> </head> <body> <div style="height: 250px;"></div> <div style="height: 250px;"></div> <table cellspacing="0" cellpadding="0"> <thead> <th>表頭1</th> <th>表頭2</th> <th>表頭3</th> <th>表頭4</th> <th>表頭5</th> </thead> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> </table> </body> </html>
結果:
有時候需要根據屏幕可用高度來動態設置表格的高度和表頭的寬度:(也就是可用寬度不足以顯示內容的時候將tbody定高，並且將thead的寬度減去滾動條的寬度使得上下對齊)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> table { border-collapse: collapse; width: 100%; text-align: left; border: 1px solid #000; } td, th { border: 1px solid #000; } tbody { display: block; overflow-x: hidden; overflow-y: auto; } thead, tbody tr { display: table; width: 100%; table-layout: fixed; word-break: break-all; } </style> <script src="../js/jquery-1.8.3.min.js"></script> </head> <body> <div style="height: 250px;"></div> <div style="height: 250px;"></div> <div id="tebleDiv"> <table cellspacing="0" cellpadding="0"> <thead> <th>表頭1</th> <th>表頭2</th> <th>表頭3</th> <th>表頭4</th> <th>表頭5</th> </thead> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> </table> </div> </body> </html> <script> $(function() { var windowHeight = $(window).height(); //窗口可用高度 var topValue = $("#tebleDiv").offset().top; var tebleDivHeight = $("#tebleDiv").height(); if (parseFloat(topValue) + parseFloat(tebleDivHeight) + 180 < parseFloat(windowHeight)) { return; } var realHeight = windowHeight - topValue -50; $("table tbody").css("height", realHeight + "px"); $("table thead").css("width", ($("table thead").width() - 18) + "px"); }); </script>
結果:
解釋:
display:table 使得子元素平分父元素的寬度 (加在table上無用，必須針對tr設置)
table-layout:fixed 在固定表格布局中，水平布局僅取決於表格寬度、列寬度、表格邊框寬度、單元格間距，而與單元格的內容無關。
thead,tbody tr { display: table; width: 100%; table-layout: fixed; word-break: break-all; }
table thead{ width: calc(100% - 17px); }
為了使thead元素和tbody tr的寬度一致
tbody{ display: block; overflow-x: hidden; overflow-y: auto; height: 100px; }
將tbody元素以塊級元素顯示並且定高，超過高度自動顯示滾動條。
2. 第二種:在table的父元素div元素上進行滾動，外層div滾動的時候表頭固定
這種方式有個解決了上面的缺陷，但是有個問題是給人的效果不太平滑。重要代碼是封裝的JS方法:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> table { border-collapse: collapse; width: 100%; text-align: left; border: 1px solid #000; } td, th { border: 1px solid #000; background-color: #FFFFFF; } #tebleDiv { overflow-x: hidden; overflow-y: auto; height: 120px; } </style> <script src="../js/jquery-1.8.3.min.js"></script> </head> <body> <div id="tebleDiv"> <table cellspacing="0" cellpadding="0"> <thead> <th>表頭1</th> <th>表頭2</th> <th>表頭3</th> <th>表頭4</th> <th>表頭5</th> </thead> <tr> <td>111111111111111111111111的高度發稿的放到大幅度放到官方剛發的的放到放到</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> </table> </div> </body> </html> <script> var zdFixedTable = { fixedTableHeadByTableDivId: function(divId) { if (!divId) { return; } var tableDiv = $("#" + divId); var table = $("#" + divId + " table"); this.unbindDivScroll(tableDiv); this.bindDivScroll(table, tableDiv); }, setTheadWidth: function(table, tableDiv) { if (!table || !tableDiv) { return; } var tableBodyCell = table.find("tbody tr:first td"); var headerCell = table.find("thead tr th"); if (tableBodyCell && headerCell) { headerCell.each(function(index) { $(this).width(tableBodyCell.eq(index).width()); }); tableBodyCell.each(function(index) { $(this).width(headerCell.eq(index).width()); }); } }, unbindDivScroll: function(tableDiv) { tableDiv.unbind("scroll"); }, bindDivScroll: function(table, tableDiv) { zdFixedTable.setTheadWidth(table, tableDiv); var timer; tableDiv.scroll(function() { clearTimeout(timer); timer = setTimeout(function() { var tableHead = table.find("thead"); var windowTop = tableDiv.scrollTop(); var position = tableHead.css("position"); if (windowTop > 5) { if ("fixed" != position) { tableHead.css("position", "fixed"); tableHead.css("margin-top", "-1px"); } } else { if ("static" != position) { tableHead.css("position", "static"); tableHead.css("margin-top", "0px"); } } }, 200); }); } } $(function() { zdFixedTable.fixedTableHeadByTableDivId("tebleDiv"); }); </script>
效果：
