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

HTML Table with Fixed Header and Scrollable Body

嗨朋友们，在本教程中，您将学习如何创建一个 使用 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 部分，如下所示

 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.23/fh-3.1.8/datatables.min.css"/>

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

 <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.23/fh-3.1.8/datatables.min.js"></script>

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

 <script>  
 $('.cell-border').DataTable( {  
 “分页”：是的，  
 “fixedHeader”：是的，  
 “bDestroy”：是的，  
 "scrollY": '200px',  
 "sScrollX": "100%",  
 “scrollCollapse”：真，  
 “响应式”：真  
 });  
 </script>

完整代码：-

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>带有固定标题的 HTML 表格</title> <link rel="stylesheet" type="text/css">  
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.23/fh-3.1.8/datatables.min.css"/>  
 </head>  
 <body>  
 <h3>具有固定标题和可滚动正文的 HTML 表格</h3>  
 <div style="width:80%;">  
 <table id="" class="cell-border" style="width:100%;">  
 <thead>  
 <tr>  
 <th scope="col">SL</th>  
 <th scope="col">姓名</th>  
 <th scope="col">电话号码</th>  
 <th scope="col">年龄</th>  
 <th scope="col">部门</th>  
 <th scope="col">指定</th>  
 <th scope="col">公司名称</th>  
 <th scope="col">薪水</th>  
 <th scope="col">入职日期</th>  
 </tr>  
 </thead>  
 <tbody>  
 <tr>  
 <td>1</td>  
 <td>比斯瓦</td>  
 <td>5434434545</td>  
 <td>28</td>  
 <td>它</td>  
 <td>B.技术</td>  
 <td>TCS</td>  
 <td>15000</td>  
 <td>24-08-2022</td>  
 </tr>  
 <tr>  
 <td>2</td>  
 <td>马诺伊</td>  
 <td>5434434548</td>  
 <td>29</td>  
 <td>账户</td>  
 <td>B.Com</td>  
 <td>维普罗</td>  
 <td>45000</td>  
 <td>25-08-2022</td>  
 </tr>  
 <tr>  
 <td>3</td>  
 <td>比马尔</td>  
 <td>5434434549</td>  
 <td>30</td>  
 <td>营销</td>  
 <td>文学学士</td>  
 <td>信息系统</td>  
 <td>50000</td>  
 <td>26-08-2022</td>  
 </tr>  
 <tr>  
 <td>4</td>  
 <td>美居</td>  
 <td>5434434545</td>  
 <td>31</td>  
 <td>销售量</td>  
 <td>嘛</td>  
 <td>IBM</td>  
 <td>55000</td>  
 <td>27-08-2022</td>  
 </tr>  
 <tr>  
 <td>5</td>  
 <td>罗宾</td>  
 <td>5434434542</td>  
 <td>32</td>  
 <td>数字营销</td>  
 <td>文学学士</td>  
 <td>网络信息技术</td>  
 <td>60000</td>  
 <td>28-08-2022</td>  
 </tr>  
 <tr>  
 <td>6</td>  
 <td>阿布舍克</td>  
 <td>5434434540</td>  
 <td>33</td>  
 <td>管理</td>  
 <td>平衡计分卡</td>  
 <td>皇家全球大学</td>  
 <td>65000</td>  
 <td>29-08-2022</td>  
 </tr>  
 <tr>  
 <td>7</td>  
 <td>拉吉</td>  
 <td>5434434544</td>  
 <td>34</td>  
 <td>建造</td>  
 <td>文学学士</td>  
 <td>塔塔癌症医院</td>  
 <td>70000</td>  
 <td>30-08-2022</td>  
 </tr>  
 <tr>  
 <td>8</td>  
 <td>拉吉辛格</td>  
 <td>5434434547</td>  
 <td>35</td>  
 <td>销售与市场营销</td>  
 <td>B.技术</td>  
 <td>HDFC银行</td>  
 <td>75000</td>  
 <td>2022 年 8 月 31 日</td>  
 </tr>  
 <tr>  
 <td>9</td>  
 <td>鲁帕姆</td>  
 <td>5434434543</td>  
 <td>36</td>  
 <td>账户</td>  
 <td>B.Com</td>  
 <td>GNRC 医院</td>  
 <td>80000</td>  
 <td>1-09-2022</td>  
 </tr>  
 <tr>  
 <td>10</td>  
 <td>临空</td>  
 <td>5434434542</td>  
 <td>37</td>  
 <td>客户服务</td>  
 <td>文学学士</td>  
 <td>依赖</td>  
 <td>25000</td>  
 <td>02-09-2022</td>  
 </tr>  
 </tbody>  
 </table>  
 </div>  
 <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.23/fh-3.1.8/datatables.min.js"></script>  
 <script>  
 $('.cell-border').DataTable( {  
 “分页”：是的，  
 “fixedHeader”：是的，  
 “bDestroy”：是的，  
 "scrollY": '200px',  
 "sScrollX": "100%",  
 “scrollCollapse”：真，  
 “响应式”：真  
 });  
 </script>  
 </body>  
 </html>