1.效果
2.实现思路
table：表格自适应屏幕的宽度和高度，要实现滚动的话，必须外层加上div(设置你需要的宽度，和高度)，table宽度超过了屏幕的宽度出现水平滚动条，高度超过了div高度出现垂直滚动条。
3.实现步骤
- 表头，表内容，底部汇总：分别用三个div(head_div,content_div,foot_div)包裹住，其中表内容的div要设置高度，这样就实现了中间内容滚动，表头底部内容固定的效果了。
- 由于表中列过多，在小屏幕下内容会过堆积，需要加上水平滚动条，方便查看。这样的话，就需要用一个div(father_div)把head_div,content_div,foot_div包裹住,father_div的css{overflow-x:auto;overflow-y:hidden},head_div,content_div,foot_div的css{overflow-x:hidden}.
- 你会发现还会出现一个问题：由于我们表头和表内容是分开的，当表内容中td内容过多时，会出现表内容和表头不对应情况。这就需要我们给列设置具体宽度了，当内容多了就需要隐藏{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
- 在我设置table列的宽度时候遇到一个问题，设置宽度无效，table表格列的宽度是根据table的宽度来分配的。当table表格宽度不够时，给td设置的宽度就无效了。
4.选列功能
- 我写的这个table需要选列的功能：就是选中某几列展示，其他的内容隐藏。这个还好操作，就是列设置不同的class，选中哪几列，就让对应的class{display:table-cell},其他列class{display:none}。为什么设置table-cell?开始我设置display：block，发现样式乱了，我才想这是表格，应该用table-cell展示。
- 这个表头是复杂，当小列隐藏了，它的父级表头列宽colspan也需要修改。
5.左侧中心和汇总固定的功能
- 这个table拼接复杂了一点，需要六个div包裹的table。需要动态设置左侧和右侧的div宽度，由于加入了选列，也需要动态设置右侧表格宽度。