Background:

When the screen is small enough for the table scroll bar to appear,   The width of thead is 1200px, but the width of the visual area is only 500px,

Solution: set the width of thead to the width of the outermost layer of table, i.e

width: calc(100% – 508px);

However, there is a problem here. When the page width continues to decrease, the highlighted area becomes smaller and smaller, so that some that should display 600px width only display 100% – 508px of the screen,

Solution to the second problem:

Add a new class of highlightclass to the problematic step, with the style of width: Calc (100% – 508px); And remove the public style

Detour: I’ve been trying to solve the problem of the real width of thead, and I didn’t read the document carefully. I found that a separate attribute can be set

Other ideas:

1. Modify requirements: the highlighted part is changed to the first two th, and it will not be covered completely

2. Modifying the highlight range is not feasible, because the principle of introjs is to add a class to the area to be highlighted, with the content of Z-index: 9999999! Then highlight it in the middle of the white background. If you add it yourself, it will also display what is outside the visible area, but highlight it in the black mask layer