<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>css凍結列的效果</title>
<!-- 1.div里面放table或者其它容器，當子容器的寬度大於父容器時，父容器就會出現滾動條。
2.頭部固定不動的列讓它脫離文檔流(position:fixed|absolute)，然后給table一個margin-left值避免給固定列擋住
3.尾部固定不動的列讓它脫離文檔流(position:absolute)，然后給尾巴添加一個占位td,因為尾部固定列會擋住最后一列
4.注意：固定列加了position:absolute不能相對於自己父親元素(table和div),否則固定不了。 -->
<style type="text/css">
.container{
width:200px;
overflow: scroll;
}
table{
border-collapse: collapse;
border: 1px solid #000;
width:100%;
margin-left:25px;
margin-right:25px;
}
table td{
border: 1px solid #666666;
width:30px;
}
.head{
background-color:red;
position: fixed;
left:0;
}
.foot{
background-color:red;
position: absolute;
left:150px;
}
.title{
width:50px;
}
</style>
</head>
<body >
<div class="container">
<table>
<tr><td class="head"><div>固定標題</div></td>
<td>標題2</td>
<td>標題3</td>
<td>標題4</td>
<td>標題5</td>
<td>標題1</td>
<td>標題1</td>
<td>標題1</td>
<td>標題1</td>
<td>標題1</td>
<td>標題1</td>
<td>標題1</td>
<td>標題1</td>
<td>標題(last)</td>
<td>占位</td>
<td class="foot">固定標題</td>
</tr>
<tr>
<td class="head">內容</td>
<td>內容</td>
<td>內容</td>
<td>內容</td>
<td>內容</td>
<td>內容</td>
<td>內容</td>
<td>內容</td>
<td>內容</td>
<td>內容</td>
<td>內容</td>
<td>內容</td>
<td>內容</td>
<td>內容</td>
<td>占位</td>
<td class="foot">內容</td>
</tr>
</table>
</div>
</body>
</html>