HTML中表头固定

准备：先去官方网站下载插件包，datatable需要jQuery，所以还要提前下载jQuery插件。

1. 引入文件：

   <link rel="stylesheet" type="text/css" href="datatables.css">

     <script type="text/javascript" language="javascript" src="jquery-1.12.4"></script>

     <script type="text/javascript" language="javascript" src="datatables.js"></script>

2. javascript代码：

   <script type="text/javascript" class="init">

   $(document).ready(function() {

   $('#example').DataTable( {

   "scrollY":        "300px",

   扫描二维码关注公众号，回复： 4702057 查看本文章

   "scrollCollapse": true,

   "paging":         false

   } );

   } );

   </script>

3. table部分代码：

    <table id="example" class="display">

   <thead>

   <tr>

   <th>学号</th>

   <th>姓名</th>

   <th>班级</th>

   <th>科目</th>

   <th>分数</th>

   <th>排名</th>

   </tr>

   </thead>

   <tbody>

   <tr>

   <td>1</td>

   <td>小明</td>

   <td>三年级一班</td>

   <td>数学</td>

   <td>90</td>

   <td>9</td>

   </tr>

   ......

4. 5

   效果如图所示

5.