隐藏溢出并同时滚动

Question

How can I create two independent containers with fixed headers and scrollable body like this i have manage to create fixed table headers but i couldn't create scrollable body that both can scroll same time at vertically and only one can scroll horizontally.

Left side tree table and gantt chart both can be scroll horizontally, but right side Gantt chart only scrolls vertically.

Please check my code below, i hace acchived almost what i want, but i neet to fix two things

1) Need to fix the Header on table B but without breaking horizontal scroll behavior 2) How can Make both A & B vertical scrolls can happen at syncrounasly at same time, like when someone scrolls Table A table b alsp needto be scroll at the same time in vertically only.

like this link http://www.bryntum.com/playpen/react/ (add some task to activate the scroll)

PLEASE CHECK THIS CODE SNIPPET IN FULL PAGE

 th, td{ padding: 10px 20px; width: 100px; } th{ background: #fff; } td{ background: #efefef; } .fl{ float: left; } .panel_body{ height: 200px; width: 430px; overflow: hidden; overflow-y:scroll; } .panel_body.scroll_h{ overflow-x: scroll; width: 300px; height: 240px; } .scroll_h table{ width: 500px; } 

 <div class="panel"> <div class="fl panel_left"> <header> <table> <thead> <tr> <th>Table A</th> <th>Start</th> <th>End</th> </tr> </thead> </table> </header> <section class="panel_body"> <table> <tbody> <tr> <td>Name1</td> <td>Start1</td> <td>End1</td> </tr> <tr> <td>Name2</td> <td>Start2</td> <td>End2</td> </tr> <tr> <td>Name3</td> <td>Start3</td> <td>End3</td> </tr> <tr> <td>Name4</td> <td>Start4</td> <td>End4</td> </tr> <tr> <td>Name5</td> <td>Start5</td> <td>End5</td> </tr> <tr> <td>Name6</td> <td>Start6</td> <td>End6</td> </tr> <tr> <td>Name7</td> <td>Start7</td> <td>End7</td> </tr> <tr> <td>Name8</td> <td>Start8</td> <td>End8</td> </tr> <tr> <td>Name9</td> <td>Start9</td> <td>End9</td> </tr> <tr> <td>Name10</td> <td>Start10</td> <td>End10</td> </tr> <tr> <td>Name11</td> <td>Start11</td> <td>End11</td> </tr> <tr> <td>Name12</td> <td>Start12</td> <td>End12</td> </tr> <tr> <td>Name13</td> <td>Start13</td> <td>End13</td> </tr> <tr> <td>Name14</td> <td>Start14</td> <td>End14</td> </tr> <tr> <td>Name15</td> <td>Start15</td> <td>End15</td> </tr> <tr> <td>Name16</td> <td>Start16</td> <td>End16</td> </tr> <tr> <td>Name17</td> <td>Start17</td> <td>End17</td> </tr> <tr> <td>Name18</td> <td>Start18</td> <td>End18</td> </tr> <tr> <td>Name19</td> <td>Start19</td> <td>End19</td> </tr> <tr> <td>Name20</td> <td>Start20</td> <td>End20</td> </tr> </tbody> </table> </section> </div> <di class="fl panel_right"> <section class="panel_body scroll_h"> <table> <thead> <tr> <th>Table B</th> <th>Start</th> <th>End</th> </tr> </thead> <tbody> <tr> <td>Name1</td> <td>Start1</td> <td>End1</td> </tr> <tr> <td>Name2</td> <td>Start2</td> <td>End2</td> </tr> <tr> <td>Name3</td> <td>Start3</td> <td>End3</td> </tr> <tr> <td>Name4</td> <td>Start4</td> <td>End4</td> </tr> <tr> <td>Name5</td> <td>Start5</td> <td>End5</td> </tr> <tr> <td>Name6</td> <td>Start6</td> <td>End6</td> </tr> <tr> <td>Name7</td> <td>Start7</td> <td>End7</td> </tr> <tr> <td>Name8</td> <td>Start8</td> <td>End8</td> </tr> <tr> <td>Name9</td> <td>Start9</td> <td>End9</td> </tr> <tr> <td>Name10</td> <td>Start10</td> <td>End10</td> </tr> <tr> <td>Name11</td> <td>Start11</td> <td>End11</td> </tr> <tr> <td>Name12</td> <td>Start12</td> <td>End12</td> </tr> <tr> <td>Name13</td> <td>Start13</td> <td>End13</td> </tr> <tr> <td>Name14</td> <td>Start14</td> <td>End14</td> </tr> <tr> <td>Name15</td> <td>Start15</td> <td>End15</td> </tr> <tr> <td>Name16</td> <td>Start16</td> <td>End16</td> </tr> <tr> <td>Name17</td> <td>Start17</td> <td>End17</td> </tr> <tr> <td>Name18</td> <td>Start18</td> <td>End18</td> </tr> <tr> <td>Name19</td> <td>Start19</td> <td>End19</td> </tr> <tr> <td>Name20</td> <td>Start20</td> <td>End20</td> </tr> </tbody> </table> </section> </di> </div> 

With css and | or Js.

Answer 1

Define a width and height to the scrollable element.
Then use the overflow property:

 #container { width: 200px; height: 200px; overflow: scroll; } #container div { width: 100%; height: inherit; } #a { background: cornflowerblue; } #b { background: brown; } 

 <div id="container"> <div id="a"></div> <div id="b"></div> </div> 

You can set a horizontal / vertical scroll with overflow-x / overflow-y .
see MDN - overflow

PS: but please search for existing questions (and answers), post some code,etc. Here's an example but it will never fit your actual project.