这篇文章主要介绍了关于HTML页面table滚动条的实现 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
table scrollbar & header fixed
有很多页面由于数据量过大,会产生横纵滚动条。为了便于使用者观看,我们要把表头固定一下。根据这个需求写了个demo来实现这个功能。
主要解决了几点问题:
1.table实现横纵滚动条
2.table表头固定
3.table列宽自适应
4.table内容不换行
主要代码块
css:
.table-scroll { width: calc(100% - 5px); overflow-x: scroll; white-space: nowrap; } .table-scroll table { table-layout: fixed; width: calc(100% - 10px); background-color:darkseagreen ; } .table-scroll thead { display: table-row; background-color: bisque; } .table-scroll tbody { overflow-y: scroll; overflow-x: hidden; display: block; height: calc(100vh - 300px); } .table-scroll th,td { width: 160px; overflow: hidden; text-overflow: ellipsis; min-width: 160px; border: 1px solid #808080; } h4, h5 { color: cornflowerblue; }
js:
$(function() { $('.table-scroll').scroll(function() { $('.table-scroll table').width($('.table-scroll').width() + $('.table-scroll').scrollLeft()); }); var tableTdWidths = new Array(); var tableWidth = 0; var tableTr0Width = 0; var tableThNum = 0; var tableTr1Width = 0; tableWidth = $('.table-scroll table').css('width').replace('px',''); tableThNum = $('.table-scroll tr:eq(0)').children('th').length; if ($('.table-scroll tr').length == 1) { // header only if (tableWidth > tableTr0Width) { $('.table-scroll tr:eq(0)').children('th').each(function(i){ $(this).width(parseInt(($(this).css('width').replace('px','')) + parseInt(Math.floor((tableWidth - tableTr0Width) / tableThNum))) + 'px'); }); } } else { // header and body tableTr1Width = $('.table-scroll tr:eq(1)').css('width').replace('px',''); $('.table-scroll tr:eq(1)').children('td').each(function(i){ tableTdWidths[i]=$(this).css('width').replace('px',''); }); $('.table-scroll tr:eq(0)').children('th').each(function(i) { if(parseInt($(this).css('width').replace('px', '')) > parseInt(tableTdWidths[i])) { tableTdWidths[i] = $(this).css('width').replace('px',''); } }); if (tableWidth > tableTr1Width) { //set all th td width $('.table-scroll tr').each(function(i){ $(this).children().each(function(j){ $(this).css('min-width',(parseInt(tableTdWidths[j]) + parseInt(Math.floor((tableWidth - tableTr1Width) / tableThNum))) + 'px'); }); }); } else { //method 1 : set all th td width $('.table-scroll tr').each(function(i){ $(this).children().each(function(j){ $(this).css('min-width',tableTdWidths[j] + 'px'); }); }); } } });
html:
<body> <h4>完成效果:1.固定表头 2.table横纵滚动条 3.table列宽自适应 4.table内容不换行</h4> <p class="table-scroll"> <table> <thead> <th>title1</th> <th>title1</th> <th>title1</th> <th>title1</th> <th>title1</th> <th>title1</th> <th>title1</th> <th>title1</th> <th>title1</th> <th>title1</th> <th>title1</th> <th>title1</th> <th>title1</th> <th>title1</th> <th>title1</th> <th>title1</th> </thead> <tbody> <tr> <td>1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>2</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>3</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>4</td> <td>body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>5</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>6</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>7</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>8</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>9</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>10</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>11</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>12</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>13</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>14</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>15</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>16</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>17</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>18</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>19</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>20</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>21</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>22</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>23</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>24</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>25</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>26</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>27</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>28</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>28</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>29</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> <tr> <td>30</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> <td>body1</td> </tr> </tbody> </table> </p> </body>
网上也有很多的例子,但是实现的效果不是想要的,自己工作需要做了一下,画面不好看,重点看效果,如有问题请指正!
相关推荐:
以上是HTML页面table滚动条的实现 的详细内容。更多信息请关注PHP中文网其他相关文章!

本篇文章带大家了解一下HTML(超文本标记语言),介绍一下HTML的本质,HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单,希望对大家有所帮助!

总结了一些web前端面试(笔试)题分享给大家,本篇文章就先给大家分享HTML部分的笔试题(附答案),大家可以自己做做,看看能答对几个!

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

在html中,document是文档对象的意思,代表浏览器窗口的文档;document对象是window对象的子对象,所以可通过“window.document”属性对其进行访问,每个载入浏览器的HTML文档都会成为Document对象。

html5支持boolean值属性;boolean值属性指是属性值为true或者false的属性,如input元素中的disabled属性,不使用该属性表示值为flase,不禁用元素,使用该属性可以不设置属性值表示值为true,禁用元素。

在html中,焦点是光标的意思,元素通过鼠标点击就可以获得光标,也即获得焦点;可以利用autofocus属性来规定当页面加载时元素会自动获得焦点,该属性是一个布尔属性,若指定元素设置该属性则会获得焦点,语法为“<指定元素 autofocus="autofocus">”。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

Dreamweaver CS6
视觉化网页开发工具

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能

mPDF
mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),