水平滾動的HTML表格（第一列固定）

Question

我一直在想辦法用固定的第一列（和水平溢出的表的其餘部分）的表我看到一個職位，有一個類似的問題。但固定列位似乎沒有解決。幫幫我？

Answer 1

我有一個類似表樣式像這樣：

<table style="width:100%; table-layout:fixed"> 
    <tr> 
     <td style="width: 150px">Hello, World!</td> 
     <td> 
      <div> 
       <pre style="margin:0; overflow:scroll">My preformatted content</pre> 
      </div> 
     </td> 
    </tr> 
</table> 

Answer 2

看看這個jQuery插件：

http://fixedheadertable.com

它增加了垂直（固定報頭行）或水平（固定的第一列）滾動到現有的HTML表格。有一個演示可以檢查這兩種情況的滾動。

Answer 3

使用jQuery DataTables插件，它支持固定的標題和列。 此示例將固定列支持HTML表 「榜樣」：

http://datatables.net/extensions/fixedcolumns/

對於兩個固定欄目：

http://www.datatables.net/release-datatables/extensions/FixedColumns/examples/two_columns.html

Answer 4

如何：

table { 
 
    table-layout: fixed; 
 
    width: 100%; 
 
    *margin-left: -100px; /*ie7*/ 
 
} 
 
td, th { 
 
    vertical-align: top; 
 
    border-top: 1px solid #ccc; 
 
    padding: 10px; 
 
    width: 100px; 
 
} 
 
.fix { 
 
    position: absolute; 
 
    *position: relative; /*ie7*/ 
 
    margin-left: -100px; 
 
    width: 100px; 
 
} 
 
.outer { 
 
    position: relative; 
 
} 
 
.inner { 
 
    overflow-x: scroll; 
 
    overflow-y: visible; 
 
    width: 400px; 
 
    margin-left: 100px; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    <table> 
 
     <tr> 
 
     <th class=fix></th> 
 
     <th>Col 1</th> 
 
     <th>Col 2</th> 
 
     <th>Col 3</th> 
 
     <th>Col 4</th> 
 
     <th class="fix">Col 5</th> 
 
     </tr> 
 
     <tr> 
 
     <th class=fix>Header A</th> 
 
     <td>col 1 - A</td> 
 
     <td>col 2 - A (WITH LONGER CONTENT)</td> 
 
     <td>col 3 - A</td> 
 
     <td>col 4 - A</td> 
 
     <td class=fix>col 5 - A</td> 
 
     </tr> 
 
     <tr> 
 
     <th class=fix>Header B</th> 
 
     <td>col 1 - B</td> 
 
     <td>col 2 - B</td> 
 
     <td>col 3 - B</td> 
 
     <td>col 4 - B</td> 
 
     <td class=fix>col 5 - B</td> 
 
     </tr> 
 
     <tr> 
 
     <th class=fix>Header C</th> 
 
     <td>col 1 - C</td> 
 
     <td>col 2 - C</td> 
 
     <td>col 3 - C</td> 
 
     <td>col 4 - C</td> 
 
     <td class=fix>col 5 - C</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

您可以在此jsbin測試一下：http://jsbin.com/uxecel/4/edit