标签:表格 tbody 表头 滚动条 width table border 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; 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>
结果:
标签:表格,tbody,表头,滚动条,width,table,border,thead 来源: https://www.cnblogs.com/qlqwjy/p/10636180.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。