这里用到css的position: sticky;（该样式对IE浏览器的支持较差）
一、首行的表头固定，不随滚动条而滚动。
html表格：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格固定表头</title>
</head>
<body>
<div>
<table cellspacing="0" border="0" cellpadding="0">
<thead>
<tr>
<th style="width:50px">Title1</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td><td>text</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
css代码：
<style>
div{
overflow:auto;
width:400px;
height:250px; /* 固定高度 */
border:1px solid gray;
border-bottom: 0;
border-right: 0;
}
table {
border-collapse:separate;
table-layout: fixed;
width: 100%; /* 固定寬度 */
word-break:break-all;/*内容自动换行*/
}
th {
position:sticky;/* 首行固定 */
z-index:1;
top:0;
background-color:lightblue;
}
td, th {
border-right :1px solid gray;
border-bottom :1px solid gray;
width:100px;
height:30px;
box-sizing: border-box;
text-align:center;
}
</style>
Google效果如下：首行在水平方向可滚动，垂直方向上固定
二、表格首行首列固定
表格的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首行首列固定</title>
</head>
<body>
<div>
<table cellspacing="0" border="0" cellpadding="0">
<thead>
<tr>
<th>Title</th><th>Title</th><th>Title</th>
<th>Title</th><th>Title</th><th>Title</th>
<th>Title</th><th>Title</th><th>Title</th>
</tr>
</thead>
<tbody>
<tr>
<th>Title</th><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<th>Title</th><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<th>Title</th><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<th>Title</th><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<th>Title</th><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<th>Title</th><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<th>Title</th><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<th>Title</th><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<th>Title</th><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<th>Title</th><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<th>Title</th><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
</tr>
<tr>
<th>Title</th><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
<td>text</td><td>text</td><td>text</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
css:
<style>
/*外层div，设置宽高度*/
div{
overflow:auto;
width:400px;
height:250px;
border:1px solid gray;
border-bottom: 0;
border-right: 0;
}
table {
border-collapse:separate;/*设置边框会被分开，而不是合并*/
table-layout: fixed;/*列宽由表格宽度和列宽度设定。*/
width: 100%;
word-break:break-all;/*内容自动换行*/
}
th {
background-color:lightblue;
}
td, th {
border-right :1px solid gray;
border-bottom :1px solid gray;
width:100px;
height:30px;
box-sizing: border-box;
text-align:center;
}
th:first-child {
position:sticky;
left:0; /* 首列最左 */
z-index:1;
}
thead tr th {
position:sticky;
top:0; /* 首行最上 */
}
/*左上角第一个单元格，显示优先级要最高*/
thead th:first-child{
z-index:2;
background-color:lightblue;
}
</style>
效果如下：
在Google上效果较好。但在IE上不兼容，如果要兼容IE，可以采用老方法，嵌套伪表头。