水平滚动的HTML表格（第一列固定）

我一直在想办法用一个固定的第一列来创build一个表格（其余的表格都是水平溢出的），我看到一个有类似问题的post。 但固定的列位似乎没有解决。 帮帮我？

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

怎么样：

 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> 

Answer 3

使用jQuery DataTables插件，它支持固定的标题和列。 这个例子将固定的列支持添加到html表格“example”中：

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

对于两个固定列：

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

Answer 4

基于skube的方法，我发现我需要的最小的一组CSS是：

 .horizontal-scroll-except-first-column { width: 100%; overflow: auto; margin-left: 20em; } .horizontal-scroll-except-first-column > table > * > tr > th:first-child, .horizontal-scroll-except-first-column > table > * > tr > td:first-child { position: absolute; width: 20em; margin-left: -20em; } .horizontal-scroll-except-first-column > table > * > tr > th, .horizontal-scroll-except-first-column > table > * > tr > td { /* Without this, if a cell wraps onto two lines, the first column * will look bad, and may need padding. */ white-space: nowrap; } 

与HTML：

 <div class="horizontal-scroll-except-first-column"> <table> ... </table> </div> 

Answer 5

看看这个JQuery插件：

http://fixedheadertable.com

它将垂直（固定标题行） 或水平 （固定第一列）滚动添加到现有HTML表格。 有一个演示可以检查两种情况的滚动。