解决Introjs滚动条出现时高亮内容超出可视区域问题

背景：

当屏幕小到table表格滚动条出现的时候， thead的宽度为1200px， 但是可视区域宽度只有500px，

解决思路：设置thead的宽度为table最外层的宽度 即

width: calc(100% - 508px);

但是， 这里有个问题，当页宽度持续减小的时候，高亮的区域越来越小，以至于有的应该显示600px宽度的只显示了屏幕的100%-508px,

第二个问题的解决思路:

给有问题的一步加上highlightClass一个新的class，样式为width: calc(100% - 508px); 并去掉公共样式即可

 

弯路：前面一直尝试解决thead真实宽度的问题，并且没仔细阅读文档发现可以设置单独属性

 

其他思路：

　　1. 修改需求: 高亮部分改为前两个th, 不再全部覆盖

　　2. 修改高亮范围，行不通， 因为introjs原理是给要高亮的区域加上一个class 内容为z-index: 9999999! 然后突出显示在白色背景中间，如果自己加的话， 会把可视区域外的也显示出来， 只不过突出在黑色遮罩层中