固定table的表头CSS&JQuery

• Internet Explorer 9 / 10 / 11
• Firefox 29
• Google Chrome 34
• Safari 5
• Opera 12

<table class="table-design tablelock1">
<thead>
<tr>
<th>TableHeader1</th><th>TableHeader2</th>
<th>TableHeader3</th><th>TableHeader4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Contents1</td><td>Contents2</td>
<td>Contents3</td><td>Contents4</td>
</tr>
<tr>
<td>Contents5</td><td>Contents6</td>
<td>Contents7</td><td>Contents8</td>
</tr>
<tr>
<td>Contents9</td><td>Contents10</td>
<td>Contents11</td><td>Contents12</td>
</tr>
</tbody>
</table>

.table-design{
border-collapse: collapse;
border: 1px solid #666;
text-align: center;
vertical-align: middle;
margin-bottom:30px;
}
.table-design th{
background: #ccc;
border:1px solid #aaa;
padding:25px 5px;
}
.table-design td{
border:1px solid #aaa;
padding:25px 5px;
}

• 方法一 CSS固定

.tablelock1 thead{
display:block;
width:482px; /* 500px - スクロールバー */
}
.tablelock1 tbody{
overflow-x: hidden;
overflow-y: auto;
-ms-overflow-x: hidden;
-ms-overflow-y: auto;
position: absolute;
display:block;
height: 100px;
width:500px;
}
.tablelock1 th
,.tablelock1 td
{
width: 110px;
}

内容来源

http://webnonotes.com/css/table-header/