需求是需要表格滚动，并且表头不动

<table class='table-style'><thead>表头部分</thead><tbody>表体部分</tbody>
</table><style>.table-style {width: 100%;border: 1px solid silver; /* 有边框 */border-collapse: collapse; /* 不会有多重边框 */}.table-style tbody {display: block;height: 600px;     /* 设定一个高度，这样才会出现滚动条 */overflow-y: auto;}.table-style thead, tbody tr {display: table;width: 100%;table-layout: fixed;}
</style>

如上处理后，表头和表体能对齐，但如果表体出现滚动条，两者就会对不齐了。尝试了很多方法，最后使用了一种：

第一步，将table和thead分别加上ref（refTable, refTHeader)

第二步，设定四个样式：

.scroll-thead {width: calc(100% - 17px); /* 一般滚动条17px宽 */
}
.scroll-table {background-color: 表格标题的颜色
}.no-scroll-thead {width: 100%;
}
.no-scroll-table: {background-color: #ffffff;   /* 没有滚动条时，表格背景设为白色 */
}

第三步，将tbody内的所有td背景色改为白色.

第四步，编写js，当表体.scrollHeight > 表体.clientHeight时，表明出现了滚动条，则为表头添加scroll-thead样式，同时为表格整体添加scroll-table样式。否则就为表头添加.no-scroll-thead样式，同时为表格整体添加no-scroll-table样式即可。

整体思路：

1. 判断是否出现了滚动条(表头的scrollHeight > clientHeight)。
2. 如果有滚动条，则缩短表头的宽度（滚动条一般17px宽，可调整)。同时将表格背景色设置同表头一致，否则缩短的表头留出的空间会显示白色。注意将表体单元格背景设置为白色。
3. 如果没有滚动条，则将表头宽度调置为100%，同时将表格背景色调整为白色。因为没有滚动条的缘故，没有数据的部分会带有表头的颜色。