表头固定内容滚动的表格
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}
/* 表头固定内容滚动的表格 */
.m-demo{margin:0 0 20px;line-height:18px;}
.m-demo .scroll{max-height:116px;_height:116px;border:1px solid #ddd;border-top:0;overflow:hidden;overflow-y:auto;}
.m-demo table{width:100%;_width:auto;table-layout:fixed;}
.m-demo th,.m-demo td{width:100px;padding:10px;border:1px solid #ddd;}
.m-demo th{font-weight:bold;background:#eee;}
.m-demo th.last,.m-demo td.last{width:auto;}
.m-demo tbody tr.first td{border-top:0;}
.m-demo tbody tr.last td{border-bottom:0;}
.m-demo tbody tr td.first{border-left:0;}
.m-demo tbody tr td.last{border-right:0;}
/* 表头固定内容滚动的表格 */
.m-demo2{margin:0 0 20px;line-height:18px;}
.m-demo2 .scroll{max-height:116px;border:1px solid #ddd;border-top:0;overflow-y:auto;}
.m-demo2 table{width:100%;table-layout:fixed;}
.m-demo2 th,.m-demo2 td{width:100px;padding:10px;border:1px solid #ddd;}
.m-demo2 th{font-weight:bold;background:#eee;}
.m-demo2 thead th:last-child,.m-demo2 tbody td:last-child{width:auto;}
.m-demo2 tbody tr:nth-child(2n){background:#fafafa;}
.m-demo2 tbody tr:first-child td{border-top:0;}
.m-demo2 tbody tr:last-child td{border-bottom:0;}
.m-demo2 tbody tr td:first-child{border-left:0;}
.m-demo2 tbody tr td:last-child{border-right:0;}
</style>
</head>
<body>
<div class="m-demo">
<table>
<thead>
<tr><th>定宽a</th><th>定宽b</th><th>定宽c</th><th class="last">最后列不定宽d</th></tr>
</thead>
</table>
<div class="scroll">
<table>
<tbody>
<tr class="first"><td class="first">定宽a</td><td>定宽b</td><td>定宽c</td><td class="last">最后列不定宽d</td></tr>
<tr><td class="first">定宽a</td><td>定宽b</td><td>定宽c</td><td class="last">最后列不定宽d</td></tr>
<tr><td class="first">定宽a</td><td>定宽b</td><td>定宽c</td><td class="last">最后列不定宽d</td></tr>
<tr><td class="first">定宽a</td><td>定宽b</td><td>定宽c</td><td class="last">最后列不定宽d</td></tr>
<tr><td class="first">定宽a</td><td>定宽b</td><td>定宽c</td><td class="last">最后列不定宽d</td></tr>
<tr class="last"><td class="first">定宽a</td><td>定宽b</td><td>定宽c</td><td class="last">最后列不定宽d</td></tr>
</tbody>
</table>
</div>
</div>
<div class="m-demo2">
<table>
<thead>
<tr><th>定宽a</th><th>定宽b</th><th>定宽c</th><th>最后列不定宽d</th></tr>
</thead>
</table>
<div class="scroll">
<table>
<tbody>
<tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
<tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
<tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
<tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
<tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
<tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
http://nec.netease.com/library/141221/3