水平滾動時保持垂直滾動條在視圖中

Question

我使用靜態標題和最小寬度列創建表。這需要2個滾動條：垂直和水平。

現在，垂直滾動條應該只滾動表格行，因爲標題是靜態的。

但是，當水平滾動時，行和標題都應該滾動。我通過擁有一個容器來實現這一點，該容器使用overflow-x：auto來保存標題和正文。 body div具有overflow-y：auto。

這樣做的問題是，由於主體是水平滾動div的子項，因此除非您一直滾動到右側，否則垂直滾動條將不可見。

我希望兩個滾動條總是可見的，但仍然只是滾動他們的預期內容。

我創建了一個codepen來證明這一點isue：

https://codepen.io/ntroncoso/pen/rmbrYQ

最重要的部分是tableContainer和身體：

#tableContainer 
{ 
    border: 2px solid red; 
    display: flex; 
    flex-direction: column; 
    overflow-x: auto; 
} 

#body 
{ 
    border: 2px solid green; 
    display: flex; 
    flex-direction: column; 
    overflow-y: auto; 
    min-width: 800px; 
} 

這些都產生所需的滾動條，但垂直皮當身體內容太寬時。如果在Javascript中有一個可行的解決方案，我願意接受。

Answer 1

實際上，您應該將「最小寬度」更改爲最大寬度並擺脫「overflow-x：auto;」

https://codepen.io/morganfens/pen/vmMazK

<div id="html"> 
<div id="container"> 
    <div id="tableContainer"> 
     <div id="body"> 
     <div id="header"> 
     <div class="head">Header 1</div> 
     <div class="head">Header 2</div> 
     <div class="head">Header 3</div> 
     <div class="head">Header 4</div> 
     </div> 
     <table id="table"> 
    <tr><td>R1C1</td><td>R1C2</td><td>R1C3</td><td>R1C4</td</tr> 
    <tr><td>R2C1</td><td>R2C2</td><td>R2C3</td><td>R2C4</td></tr> 
    <tr><td>R3C1</td><td>R3C2</td><td>R3C3</td><td>R3C4</td></tr> 
    <tr><td>R4C1</td><td>R4C2</td><td>R4C3</td><td>R4C4</td></tr> 
    <tr><td>R5C1</td><td>R5C2</td><td>R5C3</td><td>R5C4</td></tr> 
    <tr><td>R6C1</td><td>R6C2</td><td>R6C3</td><td>R6C4</td></tr> 
    <tr><td>R7C1</td><td>R7C2</td><td>R7C3</td><td>R7C4</td></tr> 
    <tr><td>R8C1</td><td>R8C2</td><td>R8C3</td><td>R8C4</td></tr> 
    <tr><td>R9C1</td><td>R9C2</td><td>R9C3</td><td>R9C4</td></tr> 
    <tr><td>R10C1</td><td>R10C2</td><td>R10C3</td><td>R10C4</td></tr> 
    <tr><td>R11C1</td><td>R11C2</td><td>R11C3</td><td>R11C4</td></tr> 
    <tr><td>R12C1</td><td>R12C2</td><td>R12C3</td><td>R12C4</td></tr> 
    <tr><td>R13C1</td><td>R13C2</td><td>R13C3</td><td>R13C4</td></tr> 
    <tr><td>R14C1</td><td>R14C2</td><td>R14C3</td><td>R14C4</td></tr> 
    <tr><td>R15C1</td><td>R15C2</td><td>R15C3</td><td>R15C4</td></tr> 
    <tr><td>R16C1</td><td>R16C2</td><td>R16C3</td><td>R16C4</td></tr> 
    <tr><td>R17C1</td><td>R17C2</td><td>R17C3</td><td>R17C4</td></tr> 
    <tr><td>R18C1</td><td>R18C2</td><td>R18C3</td><td>R18C4</td></tr> 
    <tr><td>R19C1</td><td>R19C2</td><td>R19C3</td><td>R19C4</td></tr> 
    <tr><td>R20C1</td><td>R20C2</td><td>R20C3</td><td>R20C4</td></tr> 
    <tr><td>R21C1</td><td>R21C2</td><td>R21C3</td><td>R21C4</td></tr> 
    <tr><td>R22C1</td><td>R22C2</td><td>R22C3</td><td>R22C4</td></tr> 
    </table> 
    </div> 
    </div> 
    <div id="footer"> 
     The footer 
    </div> 
    </div> 
</div> 

CSS

#tableContainer 
{ 
    border: 2px solid red; 
    display: flex; 
    flex-direction: column; 
} 

#body 
{ 
    border: 2px solid green; 
    display: flex; 
    flex-direction: column; 
    overflow-y: auto; 
    max-width: 800px; 
} 

#header{ 
    display: flex; 
    flex: row; 
    box-sizing: border-box; 
    padding: 5px; 
    min-width: 800px; 
    margin-bottom:15px; 
}