table表格，讓thead固定，tbody有滾動條，關鍵是都對齊的純css寫法。
table加滾動條，很實用，也很簡單有效，收藏了。裡面有一個css2裡的命令是我沒用過的也是這裡面關鍵的：table-layout:fixed;
原理很簡單，有愛研究的童鞋可以去css官網看看說明文件。
直接貼程式碼：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>轉載自·威易網CSS教程</title>
<style>
table tbody {
display:block;
height:195px;
overflow-y:scroll;
}
table thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
table thead {
width: calc( 100% - 1em )
}
table thead th{ background:#ccc;}
</style>
</head>
<body>
<table width="80%" border="1">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>出生年月</th>
<th>手機號碼</th>
<th>單位</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>張三封</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴與四十大盜</td>
</tr>
<tr>
<td>張小三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>騰訊科技</td>
</tr>
<tr>
<td>張三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>瀏陽河就業</td>
</tr>
<tr>
<td>張三瘋子</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>張三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>張大三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>張三五</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>張劉三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>張三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
</tbody>
</table>
</body>
</html>