用固定的左分區水平滾動

Question

我正在尋找一種在div視圖中水平滾動的方式，左側是固定的側欄。所以當滾動（水平）時，所有內容都消失在這個側邊欄後面。 舉例說明： 我不知道如何精確地做到這一點。這隻能通過CSS或與Javascript結合使用嗎？如果是這樣，怎麼樣？

這裏的[我的工作小提琴至今] ssss（http://jsfiddle.net/justamir/fp2xgqL5/）

Answer 1

如果使用一個表，使其滾動你把它與溢出一個div內。如果您想要修復列，則必須將其放在溢出的div之外。你最終像這樣的佈局：

.scrollable { 
 
    width: 100px; 
 
    overflow: auto; 
 
} 
 
.fixed, 
 
.scrollable { 
 
    float: left; 
 
}

<table class="fixed"> 
 
    <tr> 
 
    <th>FIXED</th> 
 
    </tr> 
 
    <tr> 
 
    <td>val1</td> 
 
    </tr> 
 
    <tr> 
 
    <td>val2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>val3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>val4</td> 
 
    </tr> 
 
</table> 
 
<div class="scrollable"> 
 
    <table> 
 
    <tr> 
 
     <th>col1</th> 
 
     <th>col1</th> 
 
     <th>col1</th> 
 
     <th>col1</th> 
 
     <th>col1</th> 
 
     <th>col1</th> 
 
    </tr> 
 
    <tr> 
 
     <td>val1</td> 
 
     <td>val1</td> 
 
     <td>val1</td> 
 
     <td>val1</td> 
 
     <td>val1</td> 
 
     <td>val1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>val2</td> 
 
     <td>val2</td> 
 
     <td>val2</td> 
 
     <td>val2</td> 
 
     <td>val2</td> 
 
     <td>val2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>val3</td> 
 
     <td>val3</td> 
 
     <td>val3</td> 
 
     <td>val3</td> 
 
     <td>val3</td> 
 
     <td>val3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>val4</td> 
 
     <td>val4</td> 
 
     <td>val4</td> 
 
     <td>val4</td> 
 
     <td>val4</td> 
 
     <td>val4</td> 
 
    </tr> 
 
    </table> 
 
</div>