使用固定的左div水平滾動

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>