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

Posted 2023-03-05

【中文标题】水平滚动的 HTML 表格（第一列固定）

【英文标题】：HTML table with horizontal scrolling (first column fixed)

【发布时间】：2011-03-25 01:21:52

【问题描述】：

我一直在想办法制作一个第一列固定的表格（表格的其余部分有水平溢出）我看到了一个有类似问题的帖子。但固定列位似乎没有得到解决。帮忙？

【问题讨论】：

我想稍微扩展一下这个问题：我的一个朋友想要制作一个不会扩展到超过 100% 页面的表格，但会有两个以上的列together 应该是可滚动的，以防它们需要更多的水平空间。实际上，这应该类似于 MS Excel 中的冻结列。这可能吗？

查看我对类似问题的回答：***.com/a/17557830/1763149

【参考方案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>

【讨论】：

这个答案真的会从这里的演示中受益。

JSFIDDLE demo 以便更清楚地知道这里发生了什么

只滚动一个单元格……

我不知道为什么这是公认的答案。问题是：表格的其余部分，在我看来，包括不止一列......

并且列应该与标题同步，就像列滚动一样；标题也应该随着列滚动。但我认为实施此解决方案后它们不会同步

【参考方案2】：

看看这个 JQuery 插件：

http://fixedheadertable.com

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

【讨论】：

注意：这依赖于 jquery 中已过时的功能，并且大约 1 年以来没有更新

@HaykSaakian 看起来那个项目现在又要更新了？今年说，需要jQuery 1.7版本。

【参考方案3】：

使用jQuery DataTables 插件，它支持固定的表头和列。 此示例为 html 表“示例”添加了固定列支持：

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

对于两个固定列：

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

【讨论】：

修复左侧列是通过使用 leftColumns 初始化参数完成的。此链接有效datatables.net/extensions/fixedcolumns（今天）

【参考方案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

【讨论】：

对我的查询的简单但有效的解决方案！

这基本上对我有用，但我想从可见的滚动 div 的最右边的列开始。我的列标题是日期，最近的日期在最右边，我希望在第一次显示 时可以看到它。有没有办法以编程方式做到这一点？有没有办法以编程方式向任一方向移动水平滚动条？我希望在表格顶部有始终可用的“向左滚动”和“向右滚动”按钮，因为浏览器支持的滚动条位于底部，并不总是立即可见。 当我设置表格宽度>所有数据列宽度时，我发现标题列和数据列之间存在很大差距，有人知道为什么以及如何解决它吗？请看这里：jsbin.com/sesurutojo/edit?output如果我通过 ajax 使用分页并且必须转到下一页，则滚动不起作用并且所有表属性都将丢失。如何获得相同的表格 UI 但有一些 ajax 请求？这似乎只在不需要垂直滚动时才有效。对于我的情况，有很多行，所以垂直滚动只会滚动行数据，而不是使用绝对位置以这种方式固定的行标题。

【参考方案5】：

根据 skube 的方法，我发现我需要的最小 CSS 集是：

.horizontal-scroll-except-first-column 
  width: 100%;
  overflow: auto;


.horizontal-scroll-except-first-column > table 
  margin-left: 8em;


.horizontal-scroll-except-first-column > table > * > tr > th:first-child,
.horizontal-scroll-except-first-column > table > * > tr > td:first-child 
  position: absolute;
  width: 8em;
  margin-left: -8em;
  background: #ccc;


.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;

<div class="horizontal-scroll-except-first-column">
  <table>
    <tbody>
      <tr>
        <td>FIXED</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> <td>66666</td> <td>77777</td> <td>88888</td> <td>99999</td> <td>AAAAA</td> <td>BBBBB</td> <td>CCCCC</td> <td>DDDDD</td> <td>EEEEE</td> <td>FFFFF</td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：

很好理解，很好

【参考方案6】：

您可以使用下表样式来获得具有固定第一列的水平滚动表。

<style type="text/css">
    table, th, td 
        border: 1px solid black;
        
    .table-style 
        overflow-x: auto;
    
    .table-style tr th:first-child 
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: white;
    
</style>

<div class="table-style">
<table>
    <thead>
        <tr>
            <th>_col1_row1_</th>
            <th>_col2_row1_</th>
            <th>_col3_row1_</th>
            <th>_col4_row1_</th>
            <th>_col5_row1_</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>_col1_row2_</th>
            <td>_col2_row2_</td>
            <td>_col3_row2_</td>
            <td>_col4_row2_</td>
            <td>_col5_row2_</td>
        </tr>
        <tr>
            <th>_col1_row3_</th>
            <td>_col2_row3_</td>
            <td>_col3_row3_</td>
            <td>_col4_row3_</td>
            <td>_col5_row3_</td>
        </tr>
        <tr>
            <th>_col1_row4_</th>
            <td>_col2_row4_</td>
            <td>_col3_row4_</td>
            <td>_col4_row4_</td>
            <td>_col5_row4_</td>
        </tr>
        <tr>
            <th>_col1_row5_</th>
            <td>_col2_row5_</td>
            <td>_col3_row5_</td>
            <td>_col4_row5_</td>
            <td>_col5_row5_</td>
        </tr>
    </tbody>
</table>