关键词：
【中文标题】水平滚动的 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 的最右边的列开始。我的列标题是日期，最近的日期在最右边，我希望在第一次显示根据 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>
【讨论】：
如何使用 HTML/CSS 创建第一列固定的表？
...时间】：2017-06-1904:08:13【问题描述】：我想创建一个可以水平滚动的表格。列数是动态的。我想在水平滚动表格时实现第一列需要固定/冻结。我尝试了以下CSS。第一列是固定的，但第二、第三列隐藏在固定列之下。.mydivoverflow-y:... 查看详情
具有固定页眉、第一列和页脚的表格 + 向内滚动
】具有固定页眉、第一列和页脚的表格+向内滚动【英文标题】：Tablewithfixedheader,firstcolumnandfooter+Scrollinside【发布时间】：2018-01-2622:39:56【问题描述】：我必须创建一个包含大量数据的表。因此，需要一些帮助来找到如何使其非... 查看详情
具有固定标题和固定列的 HTML 表格？ [关闭]
...便列标题在屏幕上保持固定，第一列保持固定并随着数据滚动。我希望能够滚动浏览表格的内容，但始终能够看到顶部的列标题和左侧的第一列。如果有jQuery插件 查看详情
antd-vue表格，固定左边第一列，设置滚动，有滚动条，第一列被隐藏(代码片段)
解决办法style里不要scoped，可以单独再加个style宽度为固定的宽度，我这里是200，和你在columns设置的宽度一样就行.ant-table-fixed-columns-in-bodydisplay:inline-block;width:200px; 查看详情
css让表格第一列和第一行固定
用css让表格左右移动滚动条的时候第一列固定，上下移动滚动条的时候第一行固定。并且浏览器兼容，麻烦提供全网页代码。参考技术A给你提供个思路：第一行为一行多列的表格；第一列为一列多行的表格；剩下就是一个表格... 查看详情
水平和垂直可滚动的大表格
】水平和垂直可滚动的大表格【英文标题】：Horizontallyandverticallyscrollablelargetable【发布时间】：2020-02-0705:35:00【问题描述】：好吧，这是关于带有固定页眉和页脚的无聊滚动表的下一篇文章。这个话题来自于HTML的刚性结构。源... 查看详情
滚动时如何锁定表格的第一行和第一列，可能使用 JavaScript 和 CSS？
...一行和第一列都被锁定，就像在Excel中一样？我需要表格水平和垂 查看详情
具有固定标题和固定第一列的动态 HTML 表
...：2014-02-2208:00:37【问题描述】：我正在动态创建一个html表格并填写其内容。之后，我将完整的HTML添加到我的aspx页面上已经存在的div中。我想修复动态表的标题及其第一列。到目前为止，我已经尝试过FixedHeader、datatable和fixe 查看详情
如何用css实现表格第一列固定其余内容横向滚动
最好是能给这列td或th单独定义css或js控制，这样比较好，有没有这种定义的呀可以参考此样例：.tablewidth:100%;overflow-x:scroll;background-color:#7c95b5;.fixedTablewidth:160%;text-align:center;color:#fff;font-size:14px;border-collapse:collapse;.fixedTabletrline-heigh... 查看详情
table表格固定表头和第一列内容可滚动(代码片段)
整理了下：<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title><metacharset="utf-8"/><styletype="text/css">*margin:0;padding:0;tablewidth:100%;text-align:center;border-collapse:collapse;bo... 查看详情
如何在 Flutter 中创建具有固定列的水平滚动表格？
】如何在Flutter中创建具有固定列的水平滚动表格？【英文标题】：HowtocreateahorizontallyscrollingtablewithfixedcolumninFlutter?【发布时间】：2019-11-1809:44:10【问题描述】：我想创建一系列可以垂直滚动的表格，每个表格的行数/列数可能不... 查看详情
是否可以在第一列不动的情况下使 UICollectionView 视图水平滚动？
】是否可以在第一列不动的情况下使UICollectionView视图水平滚动？【英文标题】：IsitpossibletomakeaUICollectionViewviewhorizontalscrollingwherefirstcolumnnomoving?【发布时间】：2017-11-0314:39:09【问题描述】：我需要实现的一个功能是UICollectionView... 查看详情
如何将垂直滚动条添加到始终固定第一列的表中(代码片段)
我正在研究解决方案。我创造了一张桌子;每当用户水平滚动时，它的第一列将始终固定。但是现在我还面临另一个问题，即如果记录太多，用户必须到页面末尾水平滚动。是否可以仅使用CSS进行垂直滚动？这是我的代码：<styl... 查看详情
移动端固定头部和固定左边第一列的实现方案（vue中实现demo）
最近移动端做一份报表，需要左右滚动时，固定左边部分；上下滚动时，固定头部部分。代码在Vue中简单实现主要思路是:a.左边部分滚动，实时修改右边部分的滚动条高度b.头部和内容部分都设置固定高度，当内容部分内容高度... 查看详情
bootstraptable实现固定悬浮table表头并可以水平滚动
...目中，需要将表格头部固定，而且表格大多数情况下是会水平滚动的。项目的css框架是bootstrap3，故也可以叫做bootstraptable。需要实现的是：表格头部固定，并且支持水平滚动htmlcode(sourcetable):<tableid="top_fix_table"border="0"cellpadding="... 查看详情
表格列固定
<!doctypehtml><htmldir="ltr"lang="zh-CN"><head><metacharset="utf-8"/><title>类似excel的滚动机制，当移动滚动条时固定table的第一行和第一列</title><styletype="text/css">#table-container{ 查看详情
我想要一个扩展表（左->右），但第一列固定 [重复]
...311:18:08【问题描述】：我正在创建一个“甘特图”样式的表格，所以这意味着它必须固定第一列，并且它可以是一个很长的表格，从左到右。我尝试过：1.使用简单的HTML；2.使用DIV和C 查看详情
固定水平位置，但允许使用 jQuery 进行垂直滚动
】固定水平位置，但允许使用jQuery进行垂直滚动【英文标题】：FixedhorizontalpositionbutallowingverticalscrollwithjQuery【发布时间】：2012-02-2321:49:37【问题描述】：是否有jQuery插件或其他JS库，用于使某些元素具有固定的水平位置，同时允... 查看详情