＜tbody＞出现滚动条后，同＜thead＞对不齐的解决方案

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

<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%，同时将表格背景色调整为白色。因为没有滚动条的缘故，没有数据的部分会带有表头的颜色。