HTML中表頭固定
阿新 • • 發佈:2018-12-29
準備:先去官方網站下載外掛包,datatable需要jQuery,所以還要提前下載jQuery外掛。
-
引入檔案:
<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>
-
javascript程式碼:
<script type="text/javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
"scrollY": "300px",
"scrollCollapse": true,
"paging": false
} );
} );
</script>
-
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>
......
-
5
效果如圖所示