使用Twitter引導的水平滾動表

Question

我有一個包含不同列數的表的頁面。它是產品比較頁面，用戶可以選擇最多10個產品進行比較。

我正在使用twitter bootstrap v2.1以及固定佈局+響應式。 如何讓表格在容器div內水平滾動？ 理想情況下，我還想讓第一列始終可見（凍結）。

可能嗎？

Answer 1

其實我解決的主要問題是這樣的：

<div class="row"> 
    <div class="span12" style="overflow: auto"> 
     <table class="table table-bordered"> 
      <thead> 
       <th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th><th>Column 5</th> 
       <th>Column 6</th><th>Column 7</th><th>Column 8</th><th>Column 9</th><th>Column 10</th> 
      </thead> 
      <tbody> 
       <tr> 
        <td>Row1 Column1</td><td>Row1 Column2</td><td>Row1 Column3</td><td>Row1 Column4</td><td>Row1 Column5</td> 
        <td>Row1 Column6</td><td>Row1 Column7</td><td>Row1 Column8</td><td>Row1 Column9</td><td>Row1 Column10</td> 
       </tr> 
       <tr> 
        <td>Row2 Column1</td><td>Row2 Column2</td><td>Row2 Column3</td> <td>Row2 Column4</td><td>Row2 Column5</td> 
        <td>Row2 Column6</td><td>Row2 Column7</td><td>Row2 Column8</td><td>Row2 Column9</td><td>Row2 Column10</td> 
       </tr> 
       <tr> 
        <td>Row3 Column1</td><td>Row3 Column2</td><td>Row3 Column3</td><td>Row3 Column4</td><td>Row3 Column5</td> 
        <td>Row3 Column6</td><td>Row3 Column7</td><td>Row3 Column8</td><td>Row3 Column9</td><td>Row3 Column10</td> 
       </tr> 
       <tr> 
        <td>Row4 Column1</td><td>Row4 Column2</td><td>Row4 Column3</td><td>Row4 Column4</td><td>Row4 Column5</td> 
        <td>Row4 Column6</td><td>Row4 Column7</td><td>Row4 Column8</td><td>Row4 Column9</td><td>Row4 Column10</td> 
       </tr> 
       <tr> 
        <td>Row5 Column1</td><td>Row5 Column2</td><td>Row5 Column3</td><td>Row5 Column4</td><td>Row5 Column5</td> 
        <td>Row5 Column6</td><td>Row5 Column7</td><td>Row5 Column8</td><td>Row5 Column9</td><td>Row5 Column10</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

所以，如果有人知道如何凍結第一列我真的很感激它

Answer 2

對於固定列和滾動條的數據表

獲取FixedHeader plug-in 和 然後

$(document).ready(function() { 
    var oTable = $('#example').dataTable({ 
     "sScrollX":  "100%", 
     "sScrollXInner": "150%", 
     "sScrollY":  "250px", 
     "bScrollCollapse": true, 
     "bPaginate":  false 
    }); 
    new FixedColumns(oTable, { 
     "iColumns": 2 
    }); 
}); 

reference