During this time, the Gantt chart is implemented. First, a 2x2 table layout is used. Fill in four divs in the table to display the scroll bars of the X and Y coordinates in the lower right corner, implement the synchronization of the scroll bars of the DIV in the upper right and lower left respectively, and control the width with percentages, so that the width of the DIV cannot be controlled. Fortunately, we can use Div to replace the table layout. I will share the basic code with you. <Div id = "Main" style = "border: 1px dashed # CCC; width: 100%;">
<Div class = "row" style = "margin: 4px;">
<Div class = "Left" id = "div1" style = "float: Left; margin-Right: 4px; Background: red; Height: 100px; width: 20%;">
</Div>
<Div class = "right" id = "div2" style = "OVERFLOW-X: hidden; VERFLOW-Y: hidden; Background: Blue; Height: 100px; width: 75%;">
</Div>
</Div>
<Div class = "row" id = "div3" style = "margin: 4px;">
<Div class = "Left" style = "OVERFLOW-X: hidden; VERFLOW-Y: hidden; float: Left; margin-Right: 4px;
Background: red; Height: 100px; width: 20%; ">
</Div>
<Div class = "right" id = "div4" onscroll = "document. getelementbyid ('div2'). scrollleft =
This. scrollleft; document. getelementbyid ('did3'). scrolltop = This. scrolltop; "style =" OVERFLOW-X: Scroll; overflow-
Y: Scroll; Background: Blue; Height: 100px; width: 75%; ">
</Div>
</Div>
</Div>
