css样式固定表头表体可以滑动_div+css实现表头固定内容滚动表格

在前段开发项目过程中我们经常会用到表格，下面青岛星网跟大家分享：div+css实现表头固定内容滚动表格，下面给出详细实现范例代码供大家学习。

HTML范例代码

定宽a定宽b定宽c最后列不定宽d

定宽a	定宽b	定宽c	最后列不定宽d
定宽a	定宽b	定宽c	最后列不定宽d
定宽a	定宽b	定宽c	最后列不定宽d

定宽a定宽b定宽c最后列不定宽d

定宽a	定宽b	定宽c	最后列不定宽d
定宽a	定宽b	定宽c	最后列不定宽d
定宽a	定宽b	定宽c	最后列不定宽d
定宽a	定宽b	定宽c	最后列不定宽d
定宽a	定宽b	定宽c	最后列不定宽d
定宽a	定宽b	定宽c	最后列不定宽d

CSS范例代码/* 预览辅助样式 */

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:0;padding:0;}

header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}

table{border-collapse:collapse;border-spacing:0;}

/* 表头固定内容滚动的表格 */

.m-demo{margin:0 0 20px;line-height:18px;}

.m-demo .scroll{max-height:116px;border:1px solid #ddd;border-top:0;overflow-y:auto;}

.m-demo table{width:100%;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:0;}

.m-demo tbody tr:last-child td{border-bottom:0;}

.m-demo tbody tr td:first-child{border-left:0;}

.m-demo tbody tr td:last-child{border-right:0;}