2.1 操作步骤
首先来看 iframe 的定义方式：
其中 height、width 决定了 iframe 的大小，其值有两种写法：
height=100%相对于浏览器的百分比
height="800"实际像素值
frameborder="0"设置 HTML 框架边框的显示方式，0 则表示没有边框
因此，如果用实际像素值来定义 iframe 的大小，就可能出现 iframe 比浏览器大的情况。
2.1.1使用百分比来定义iframe 大小
使用百分比来定义iframe 大小，确保 iframe 始终在浏览器内，只有 iframe 中才可能会出现滚动条，如下图所示的效果，就只有一组滚动条，示例如下：
2.1.2 直接隐藏滚动条
可以直接将滚动条隐藏，JS 代码如下：
2.1.3 效果展示
只保留一个滚动条，如下图所示：
2.2其他问题
其中使用谷歌浏览器还是会有滚动条，因为 body 默认有 margin 属性，谷歌计算 iframe 的宽度时去掉 margin 了，但是计算高度时没去掉，所以页面集成时需要修改 body 属性，加上style="margin:0px"，如下所示：
纯CSS table表格 thead固定 tbody滚动
纯CSStable表格thead固定tbody滚动效果
由于项目需要，在表格中，当数据量越来越多时，就会出现滚动条，而在滚动的过程中，默认情况下表格头部会跟着表格内容一起滚动，导致看不到头部对应的字段名，影响体验效果！
实现思路：
将内容要滚动的区域控制在 tbody 标签中添加 overflow-y:auto; 样式，给 tr 标签添加table-layout:fixed; (这是核心)样式，由于 tbody 有了滚动条后，滚动条也要占位，又会导致 tbody 和 thead 不对齐，所以在设置tbody 的宽度时要把滚动条的宽度也加上【如果不想显示滚动条的话，可以把滚动条的宽度设置为0px，滚动条就没有了。
下面是效果图，具体实例代码也在下面：
实例代码：
纯CSS table表格 thead固定 tbody滚动
纯CSS table表格 thead固定 tbody滚动
序 号
姓 名
年 龄
性 别
手 机
001
Name
28
女
Mobile
002
Name
28
男
Mobile
003
Name
28
女
Mobile
004
Name
28
男
Mobile
005
Name
28
女
Mobile
006
Name
28
男
Mobile
007
Name
28
女
Mobile
008
Name
28
男
Mobile
【table，thead，tbody，tfoot】 colspan：合并行， rowspan：合并列
mu-table：
mu-table是一个我用通过基于 Vue.js v2.0 写的一个表格组件，可支持固定表头、左/右列、分页、排序、单/全选、功能按扭等，需要的小伙伴自取。
代码地址： 实例地址：
