溢出隱藏和滾動同時

Question

如何創建具有固定頭部和身體滾動兩個獨立的容器，如this我已經設法創建固定表頭，但我不能創建滾動體既可以滾動同時在垂直方向和只可以水平滾動。

左側樹表和甘特圖既可以水平滾動，但右側的甘特圖僅垂直滾動。

請檢查下面我的代碼，我腦水腫acchived我想幾乎什麼，但我NEET解決兩件事情

1）需要修復的表B中的頭，但不破壞水平滾動行爲 2）如何使兩個垂直滾動同時發生在同一時間，例如當某人滾動表格時，需要同時滾動垂直表格。

這樣的鏈接http://www.bryntum.com/playpen/react/（添加一些任務，以激活滾動）

請檢查此代碼片段在整頁

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>

CSS和|或Js。

Answer 1

定義可滾動元素的寬度和高度。
然後使用overflow屬性：

#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>

您可以設置一個水平/垂直滾動與overflow-x/overflow-y。
看到MDN - overflow

PS：但請搜索現有的問題（和答案），張貼一些代碼等。這是一個例子，但它永遠不會適合你的實際項目。