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

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

HTML范例代码

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;}