1. 引入CSS
<link rel="stylesheet" href="css/bootstrap.css"> <link type="text/css" rel="stylesheet" href="css/style.css">
2. 引入JS
<script src="js/jquery.min.js"></script> <script src="js/fixedTable.js"></script>
3. HTML代码
<div style="height:200px;"></div> <h3>1、单级表头</h3> <table id="dataTable" class="table table-bordered"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>籍贯</th> <th>家庭人口</th> <th>文化水平</th> <th>生日</th> <th>星座</th> <th>毕业院校</th> <th>行业</th> <th>婚姻状况</th> <th>电子邮箱</th> <th>手机</th> <th>政治面貌</th> </tr> </thead> <tbody> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> </tbody> </table> <h3>2、多级表头</h3> <table id="dataTableMul" class="table table-bordered"> <thead> <tr> <th rowspan="2">姓名</th> <th>年龄</th> <th>性别</th> <th>籍贯</th> <th>家庭人口</th> <th>文化水平</th> <th>生日</th> <th>星座</th> <th>毕业院校</th> <th>行业</th> <th>婚姻状况</th> <th>电子邮箱</th> <th>手机</th> <th>政治面貌</th> </tr> <tr> <th class="none">姓名</th> <th>年龄</th> <th>性别</th> <th>籍贯</th> <th>家庭人口</th> <th>文化水平</th> <th>生日</th> <th>星座</th> <th>毕业院校</th> <th>行业</th> <th>婚姻状况</th> <th>电子邮箱</th> <th>手机</th> <th>政治面貌</th> </tr> </thead> <tbody> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> we16s5w[email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> <tr> <td> 小张 </td> <td> 25 </td> <td> 女 </td> <td> 洛阳市西工区 </td> <td> 4 </td> <td> 本科 </td> <td> 6月20 </td> <td> 双子 </td> <td> 清华大学 </td> <td> 金融 </td> <td> 未婚 </td> <td> [email protected] </td> <td> 19635621457 </td> <td> 群众 </td> </tr> </tbody> </table> <script> var table, tableMul; $(document).ready(function() { table = new FixedTable("dataTable", 1); tableMul = new FixedTable("dataTableMul", 2); }); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p> <p>来源：<a href="http://sc.51qianduan.com/" target="_blank">站长素材</a></p> </div>
admin 2020-07-27 13:54:32 0 0 0 