使用Bootstrap使一列固定爲水平滾動？

Question

假設我有以下幾點：

  <table class="table table-bordered table-striped table-hover"> 
      <thead> 
      <tr> 
       <th>#</th> 
       <th>Table heading</th> 
       <th>Table heading</th> 
       <th>Table heading</th> 
       <th>Table heading</th> 
       <th>Table heading</th> 
       /* ... more table headers */ 
      </tr> 
      </thead> 
      <tbody> 
      <tr> 
       <td>ID 1</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
      <tr> 
       <td>ID 2</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
       /* ... more table rows */ 
      </tbody> 
     </table> 

我想添加更多的表頭，並最終使該表可滾動水平。是否有可能使第一列（包含ID的列）保持固定並始終可見，無論用戶水平滾動多少？

我想創建使用jQuery插件已經在這裏實現：http://www.novasoftware.com/Download/jQuery_FixedTable/JQuery_FixedTable.aspx（現場演示這裏：http://www.novasoftware.com/Download/jQuery_FixedTable/jQuery_FixedTable_Demo.htm）

Answer 1

你想要做的是設置你的第一列的位置absolute什麼。這將需要應用於您所有行中的第一個<td>標籤 - 輕鬆完成課程。這也需要一個寬度，然後一個與寬度相等的負左邊距，以便它放在滾動內容的左側。

然後您需要爲您的表創建一個包裝，並將其overflow-x設置爲scroll。這允許您的表格滾動。這也需要一個寬度 - 超出寬度的任何東西都可以滾動。

您可能想要做的最後一件事是將white-space: nowrap添加到您的<th>和<td>元素中，以便單元格中的文本不會換行。

Demo Here

th, td { 
    white-space: nowrap; 
} 

.first-col { 
    position: absolute; 
    width: 5em; 
    margin-left: -5em; 
} 

.table-wrapper { 
    overflow-x: scroll; 
    width: 600px; 
    margin: 0 auto; 
} 

<div class="container"> 
    <div class="table-wrapper"> 
     <table class="table table-bordered table-striped table-hover"> 
      <thead> 
       <tr> 
        <th class="first-col">#</th> 
        <th>Table heading</th> 
        <th>Table heading</th> 
        <th>Table heading</th> 
        <th>Table heading</th> 
        <th>Table heading</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td class="first-col">ID 1</td> 
        <td>Table cell</td> 
        <td>Table cell</td> 
        <td>Table cell</td> 
        <td>Table cell</td> 
        <td>Table cell</td> 
       </tr> 
       <tr> 
        <td class="first-col">ID 2</td> 
        <td>Table cell</td> 
        <td>Table cell</td> 
        <td>Table cell</td> 
        <td>Table cell</td> 
        <td>Table cell</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div>