一、实现效果
二、主要的2个属性
table-layout : fixed position : sticky
1、table-layout
table-layout属性有两种特定值：
auto（预设值）-表格的总宽度决定每一个储存格（cell）的最大值fixed - 表格的总宽度决定于表格width的定义,以及各栏位（column）width的定义
为了让表格呈现滚动效果，必须设定table-layout:fixed 并且给与表格宽度。
table {table-layout: fixed;width: 100%;}
2、Position
大家对position 的作用应该不陌生，而固定表格则需要使用到 position : sticky 的设定
sticky 的表现类似于relative 和fixed 的合体，在目标区域中可见时，他的行为就像relative 不会有任何变化，而当页面滚动超出目标区域时，他的表现改为fixed会固定于目标位置
要注意的是当position : sticky应用于table，只能作用于和，并且一定要定义目标位置 left / right / top / bottom 才会出现固定效果！
thead tr th {position:sticky;top:0;}
三、案例代码
这个案例主要实现了表格在横向滚动或者纵向滚动时可以锁定表格的头部。
主要 css 代码在 style 标签下，还有就是表格外层的div也设置了绝对布局，这样可以将内部表格的高度设置为100%，否则就需要设置一个固定高度。
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>table {border-collapse: collapse;}.sticky-table {overflow: auto;height: 100%; /* 设置固定高度 */width: 100%;position: absolute}.sticky-table td, .sticky-table th {/* 设置td,th宽度高度 */border: 1px solid #c7d8ee;width: 150px;min-width: 150px;height: 30px;padding: 5px;}.sticky-table th {position: sticky;top: 0; /* 首行永远固定在头部 */background-color: #eaf4ff; /*设置表头背景色*/}.sticky-table td:first-child, .sticky-table th:first-child {position: sticky;left: 0; /* 首列永远固定在左侧 */z-index: 1;background-color: #eaf4ff;}.sticky-table th:first-child {z-index: 2; /*表头的首列要在上面*/}.sticky-table th > div {width: 100%;white-space: normal;word-wrap: break-word;word-break: break-all;}/*.sticky-table table {table-layout: fixed;}*/</style></head><body style="padding: 0px;margin: 0px;"><div class="sticky-table"><table><thead><tr><th></th><th colspan="8">个人素养</th><th colspan="4">社群素养</th><th colspan="8">职业素养</th></tr><tr><th></th><th colspan="2">身体素质</th><th colspan="2">艺术修养</th><th colspan="2">心理素质</th><th colspan="2">道德修为</th><th colspan="2">爱国与责任意识</th><th colspan="2">法律与环保意识</th><th colspan="6">基本职业素质</th><th colspan="2">企业文化与创新精神</th></tr><tr><th>姓名</th><th><div>基本身体情况</div></th><th><div>体育特长能力</div></th><th><div>艺术审美</div></th><th><div>爱好特长</div></th><th><div>心理健康</div></th><th><div>自我调节</div></th><th><div>自信自强、诚实守信</div></th><th><div>文明素养、个人行为规范</div></th><th><div>爱国意识</div></th><th><div>责任心及服务意识</div></th><th><div>法律意识</div></th><th><div>环保意识</div></th><th><div>语言表达能力及口语特长</div></th><th><div>自我管理，自我激励</div></th><th><div>发展规划能力</div></th><th><div>信息技术能力</div></th><th><div>沟通能力</div></th><th><div>团队合作能力</div></th><th><div>企业文化学习</div></th><th><div>创新能力、解决问题能力</div></th></tr></thead><tbody><tr><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td></tr><tr><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td></tr><tr><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td></tr><tr><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td></tr><tr><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td></tr><tr><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td></tr><tr><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td></tr><tr><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td></tr><tr><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td></tr><tr><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td></tr><tr><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td></tr><tr><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td></tr><tr><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td></tr><tr><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td></tr><tr><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td><td>优秀</td></tr></tbody></table></div></body></html>
参考：/tiandi/p/13883306.html
