5.让表格的标题在滚动表格时一动不动

最新推荐文章于 2024-05-11 15:19:17 发布
最新推荐文章于 2024-05-11 15:19:17 发布
阅读量2.1k 收藏
点赞数 1
分类专栏： Excel
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60139936/article/details/119834925
版权

一、冻结首行首列

处理数据量较大的表格时，向下拖动滚动条，表格的标题栏就不见了，用户在查看数据时，需要来回拖动滚动条才能看到标题，那么是否可以将表格设置成无论怎样滚动表格，标题都始终显示呢？

如果表格中的标题只有一行或一列，可以通过冻结首行或首列，使表格的标题始终显示在第一行或第一列。 

1.打开所需文件，单击【视图】\rightarrow【窗口】组\rightarrow【冻结窗格】按钮，在弹出的下拉列表中选择【冻结首行】项。

 2.这样就可以将表格的首行“冻住”，在拖动滚动条时，标题始终显示在第一行。

3. 若要取消冻结在【冻结窗格】按钮的下拉列表中选择【取消冻结窗格】即可。

最低0.47元/天 解锁文章
学习中......
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html怎么让表头不滚动条,table固定表头，tbody滚动条样式设置以及填的几个坑
weixin_34310322的博客
06-23 2460
工作中或许会用到 table 表格固定表头， tbody 滚动的效果。为了方便我这里直接用的 Bootstrap 的表格样式。今天研究了一下，整理了几种方案：有的建议使用：position: absolute 或者 position: fixed;.tablethead{position:absolute;top:0;left:0;}或者.tablethead{position:fix...
html的table滚动时固定首行和首列
11-26
html的table滚动时固定首行和首例，网上多为3个table拼合实现，现使用一个table实现
table固定表头
bluelotos893的博客
09-01 7428
设置table表头固定
element的table表格表头不动，内容横向竖向滚动，前两列设置了fixed，会出现的bug，用下面的方法可以解决
最新发布
m0_73738273的博客
05-11 219
【代码】element的table表格表头不动，内容横向竖向滚动，前两列设置了fixed，会出现的bug，用下面的方法可以解决。
实现固定表头和表列的table组件
wrc的专栏
12-13 2195
实现固定表头和表列的table组件
jQuery表格信息自动向上滚动代码.zip
01-11
在本案例中，jQuery将用于创建一个动态的表格滚动效果。 1. **jQuery选择器与DOM操作**： 在实现自动滚动前，我们需要先获取表格元素。jQuery提供了丰富的选择器，如ID选择器（`#id`）、类选择器（`.class`）等，...
HTML5_html表格表头固定不滚动内容滚动.rar
07-10
HTML5_html表头固定不滚动而内容滚动的效果，表格是基于Div CSS实现的，将表头固定...在显示较多数据时，当用户滚动鼠标中轮时，表格内容会滚动，而表头固定不变，可以将表格内容与表头很好的对应，便于阅读表格内容。
jQuery实现固定表头标题栏让表格数据在滚动栏里滚动.zip
11-18
在网页设计中，数据展示往往是不可或缺的一部分，尤其是在处理大量数据时，表格的使用变得尤为重要。然而，当表格内容过多导致需要滚动浏览时，表头通常会随着页面滚动消失，这给用户理解数据带来不便。为了解决这个...
解决layui表格的表头不滚动的问题
10-16
首先，我们需要理解问题的核心在于当表格内容超过可视区域时，只有tbody部分可以滚动，而thead部分固定不动。为了解决这个问题，我们可以采用一种分层的方法，将表头和内容分开处理。 步骤如下： 1. 创建两个 ...
完整版高级表格数据滚动显示例程.e.rar
04-03
在IT行业中，高级表格数据滚动显示是一个常见的需求，特别是在大数据量的展示和处理时。这个“完整版高级表格数据滚动显示例程.e.rar”压缩包文件提供了一个完整的解决方案，适用于那些需要高效、流畅地处理大量表格...
使用html中的table实现内容滚动下拉表头固定不动的方法
徊忆羽菲
08-06 4877
使用html中的table实现内容滚动下拉表头固定不动的方法 序号内容 1 我只是用来测试的 2 我只是用来测试的 3 我只是用来测试的 4 我只是用来测试的 5 我只是用来测试的 6 我只是用来测试的 7 我只是用来测试的 8 我只是用来测试的 9 我只是用来测试的 10 我只是用来测试的 11 我只是用来测试的 12 我只是用来测试的 13 我只是用来测试的 14 我只是用来测试的 15 我只是用来测试的 ...
html使table表头不动,html怎么实现表头不动
weixin_26882891的博客
06-18 4579
html实现表头不动的方法：首先将内容要滚动的区域控制在tbody标签中，并添加“overflow-y: auto;”样式；然后给tr标签添加“table-layout:fixed;”即可固定表头。本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。HTML table表格 固定表头 tbody加滚动条纯CSS table表格 thead固定 tbod...
HTML table表头固定（自己做项目使用的几种方法）
热门推荐
多毛大叔爱萝莉的博客
07-02 7万+
还记得之前公司需要做表头固定，但是由于基础太差，去查了好多好多文档。最后总结出几个不错的方法和插件。 一、使用css + js来实现表头固定 使用css定位th 根据父级滚动条scrolltop的偏移量获取值，在用js把偏移量赋值到th的定位top上。就做到了表头固定。（此方法需要固定高度） 项目demo css样式部分 主要是出现滚动条和定位th还有固定高度。 &l...
table表头固定
weixin_33836874的博客
02-16 511
2019独角兽企业重金招聘Python工程师标准>>> ...
HTML 表格滚动锁定表头，实现固定行列
dongfangxinding的博客
12-11 2723
sticky 的表现类似于relative 和fixed 的合体，在目标区域中可见时，他的行为就像relative 不会有任何变化，而当页面滚动超出目标区域时，他的表现改为fixed会固定于目标位置。主要 css 代码在 style 标签下，还有就是表格外层的div也设置了绝对布局，这样可以将内部表格的高度设置为100%，否则就需要设置一个固定高度。fixed - 表格的总宽度决定于表格width的定义,以及各栏位（column）width的定义。
html table表头不变滚动表体
回梦游仙
04-09 2万+
table 需要出现纵向滚动条时，大多数情况会在table外面包一层div 设置css属性  overflow:auto 来实现table出现滚动条但这样做有个问题，滑动表格是移动整体 表头也会被移动。 解决办法有如下 1、 设置两个table 表头一个表体一个
html 表格第一列在表格左右滑动的时候固定不动
06-03
您可以通过CSS的`position`属性和`z-index`属性来实现表格第一列固定不动。具体实现步骤如下： 1. 在表格的`<thead>`和`<tbody>`标签中分别为第一列添加一个`<th>`和`<td>`标签，并设置相应的样式。 ``` <table> <thead> <tr> <th>固定列</th> <th>列1</th> <th>列2</th> <th>列3</th> </tr> </thead> <tbody> <tr> <td>固定列</td> <td>内容1</td> <td>内容2</td> <td>内容3</td> </tr> <tr> <td>固定列</td> <td>内容4</td> <td>内容5</td> <td>内容6</td> </tr> ... </tbody> </table> ``` 2. 为表格的`<thead>`标签和`<tbody>`标签设置`display: block`属性，并设置表格的宽度和高度。 ``` thead, tbody { display: block; width: 100%; height: 200px; } ``` 3. 为表格的`<tbody>`标签设置`overflow-y: scroll`属性，使其在纵向滚动时出现滚动条。 ``` tbody { overflow-y: scroll; } ``` 4. 为表格的第一列`<th>`和`<td>`标签设置`position: sticky`属性和`left: 0`属性，使其固定在左侧。 ``` th:first-child, td:first-child { position: sticky; left: 0; z-index: 1; background-color: #fff; } ``` 这样就可以实现表格第一列固定不动了。完整的代码如下所示： ``` <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th:first-child, td:first-child { position: sticky; left: 0; z-index: 1; background-color: #fff; } thead, tbody { display: block; width: 100%; height: 200px; } tbody { overflow-y: scroll; } </style> <table> <thead> <tr> <th>固定列</th> <th>列1</th> <th>列2</th> <th>列3</th> </tr> </thead> <tbody> <tr> <td>固定列</td> <td>内容1</td> <td>内容2</td> <td>内容3</td> </tr> <tr> <td>固定列</td> <td>内容4</td> <td>内容5</td> <td>内容6</td> </tr> ... </tbody> </table> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值