帶有固定第一列的表格滾動條

Question

我試圖讓表格在按鈕上左右滾動，然後保持第一列在它的位置。 我的數據都在一個表中，所以我不能創建兩個表而不是一個表。有沒有辦法做到這一點？看下面的小提琴。

的jQuery：

$(document).ready(function() { 
    $("#right").on("click", function() { 
    var position = $("table").position(); 
    $("table").animate({ 
     left: position.left - 200 
    }, 800); 
    }); 
}); 
$("#left").on("click", function() { 
var position = $("table").position(); 
$("table").animate({ 
    left: position.left + 200 
}, 800); 
}); 

CSS：

#table-wrapper { 
width: 95%; 
float: left; 
overflow-x: scroll; 
background: #ddd; 

}

table { 
background: #fff; 
width: 1200px; 
text-align:center; 
overflow: hidden; 
position:relative; 
} 
table thead tr th:first-child, 
table tbody tr td:first-child { 
background: yellow; 
top: auto; 
left: 0.5; 
position: absolute; 
width: 6em; 
} 

HTML：

<button id="left">&larr;</button> 
<button id="right">&rarr;</button> 

<div id="table-wrapper"> 
    <table border="1"> 
    <thead> 
     <tr> 
     <th>Heading1</th> 
     <th>Heading2</th> 
     <th>Heading3</th> 
     <th>Heading4</th> 
     <th>Heading5</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>1</td> 
     <td>12</td> 
     <td>13</td> 
     <td>14</td> 
     <td>15</td> 
     </tr> 
     <tr> 
     <td>2</td> 
     <td>22</td> 
     <td>23</td> 
     <td>24</td> 
     <td>25</td> 
     </tr> 
     <tr> 
     <td>3</td> 
     <td>32</td> 
     <td>33</td> 
     <td>34</td> 
     <td>35</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

這是我的fiddle。

Answer 1

這裏一個Working Fiddle

使用這個CSS position:fixed固定的元素。

使下面提到的變化

table thead tr th:first-child, 
table tbody tr td:first-child { 
    background: yellow; 
    top: auto; 
    position:fixed; /*change this*/ 
    left: 0.5; 
    width: 6em; 
} 

而且你必須改變你的jQuery的一點點。問題在於選擇器。

在你的jquery中用$("#table-wrapper")代替$("table")，因爲它的table-wrapper有滾動而不是表格。