水平スクロール時に垂直スクロールバーを表示する

Question

スタティックヘッダーと最小幅の列を持つテーブルを作成しています。これには2つのスクロールバーが必要です：垂直と水平。

これで、ヘッダーが静的であるため、垂直スクロールバーはテーブル行をスクロールするだけです。

ただし、水平方向にスクロールすると、行とヘッダーの両方がスクロールされます。私はoverflow-x：autoでヘッダとボディの両方を保持するコンテナを持つことでこれを達成しました。本文divにoverflow-y：autoがあります。

この問題は、本体が水平スクロールdivの子であるため、右にスクロールしない限り、垂直スクロールバーが表示されないことにあります。

私は、両方のスクロールバーを常に表示したいと思っていますが、意図した内容をスクロールするだけです。

私はこのisueを実証するcodepenを作成しました：

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; 
}