具有固定标题和可滚动正文的 HTML 表格

具有固定标题和可滚动正文的 HTML 表格

嗨朋友们，在本教程中，您将学习如何创建一个 使用 Datatables 具有固定标题和可滚动正文的 HTML 表格 .固定的标题属性帮助我们在表格行的固定位置查看标题名称。

实际上，有很多关于这个主题的教程，例如通过粘性位置或 CSS 等使用引导程序，但事实是，有时这些提示和技巧可能不起作用，有时可能会起作用。

还读了， ** Google Maps 使用 Maps Javascript API 和 HTML 添加标记**

最后，我为您找到了一个更好的解决方案。因此，我们可以在 Datatables 的帮助下创建一个带有固定标题的 HTML 表格。

• Datatables 为 HTML 表格提供了各种功能，例如在表格行之间搜索数据或显示每页表格行数，以便快速加载数据。
• 它还提供了对数据进行升序或降序排序的功能，只需单击 HTML 表格的各个标题字段即可。
• 它还可以帮助我们设置滚动条来水平移动表格数据。
• 它还帮助我们设置滚动条以垂直移动表格数据。

使用 Datatables 创建具有固定标题和可滚动正文的 HTML 表格的步骤

步骤1：- 在本地服务器的根目录中创建一个 HTML 文件。
第2步：- 放置一些表格数据，以便我们可以检查滚动以及固定标题。
第 3 步：- 从 Datatables CDN 复制 CSS 链接并将其粘贴到 HTML 文件的 head 部分，如下所示

第 4 步：- 从 数据表 CDN 并在body标签结束之前粘贴它们，如下所示

第 5 步：- 同时复制javascript代码并将其粘贴到之前粘贴的javascript链接下方，如下所示

完整代码：-

具有固定标题和可滚动正文的 HTML 表格

SL	姓名	电话号码	年龄	部门	指定	公司名称	薪水	入职日期
1	比斯瓦	5434434545	28	它	B.技术	TCS	15000	24-08-2022
2	马诺伊	5434434548	29	账户	B.Com	维普罗	45000	25-08-2022
3	比马尔	5434434549	30	营销	文学学士	信息系统	50000	26-08-2022
4	美居	5434434545	31	销售量	嘛	IBM	55000	27-08-2022
5	罗宾	5434434542	32	数字营销	文学学士	网络信息技术	60000	28-08-2022
6	阿布舍克	5434434540	33	管理	平衡计分卡	皇家全球大学	65000	29-08-2022
7	拉吉	5434434544	34	建造	文学学士	塔塔癌症医院	70000	30-08-2022
8	拉吉辛格	5434434547	35	销售与市场营销	B.技术	HDFC银行	75000	2022 年 8 月 31 日
9	鲁帕姆	5434434543	36	账户	B.Com	GNRC 医院	80000	1-09-2022
10	临空	5434434542	37	客户服务	文学学士	依赖	25000	02-09-2022

Javascript代码说明

• “paging”：true，将启用分页，这意味着每页要包含许多表行。
• “fixedHeader”：true，将固定表格的表头位置，这意味着除了表数据之外您不能移动表头。
• “scrollY”: '200px'，将设置滚动元素的垂直宽度。
• “sScrollX”：“100%”，将启用水平滚动条到表格。
• “responsive”: true 将使表格响应。

结论：- 我希望本教程能帮助您理解概述。如果有任何疑问，请在下方留言

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/17498/31380600