div+css实现表头固定内容滚动表格

<div class="m-demo">
<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{margin:20px;}
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:;padding:;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:;}
/* 表头固定内容滚动的表格 */
.m-demo{margin: 20px;line-height:18px;}
.m-demo .scroll{max-height:116px;border:1px solid #ddd;border-top:;overflow-y:auto;}
.m-demo table{width:%;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 thead th:last-child,.m-demo tbody td:last-child{width:auto;}
.m-demo tbody tr:nth-child(2n){background:#fafafa;}
.m-demo tbody tr:first-child td{border-top:;}
.m-demo tbody tr:last-child td{border-bottom:;}
.m-demo tbody tr td:first-child{border-left:;}
.m-demo tbody tr td:last-child{border-right:;}
上一篇:[每日一题] 159. 生命游戏(编码、常规解法)


下一篇:C# Winform同时启动多个窗体类