table第一列水平固定，垂直可滚动

最新推荐文章于 2024-08-14 10:47:25 发布

爽儿儿儿

最新推荐文章于 2024-08-14 10:47:25 发布

阅读量4k

点赞数

分类专栏： vue 文章标签： vue 滚动事件

本文链接：https://blog.csdn.net/Shuanger112/article/details/81869368

版权

本文介绍如何在Vue中实现表格第一列水平固定，同时保持垂直滚动功能。通过固定定位和监听滚动事件，调整表格第一列的位置。在动态生成的表格中，需额外处理表格生成后的错位问题。

摘要由CSDN通过智能技术生成

table第一列水平固定，垂直可滚动

既然有固定的话首先需要想到给table的第一列加上固定定位

#divTable >>> table tr td:nth-child(1) {
   position: fixed;}

但是此时table的第一列无论上下、左右滑动都是固定不动的，明显与需求不符，所以我们还需要执行以下代码

接下来我们要在methods里面添加一个方法方便调用

methods:{
    handleScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || docu

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

爽儿儿儿

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

html顶部table固定,CSS实现：固定Table表头和第一列

weixin_31139027的博客

07-14

3256

当表格内容太多的时候，固定表头不让标题滚出屏幕外，是一个很人性化的设计；而当横向项目内容太多时，固定第一列(项目列)也是一个很贴心的设计。本文介绍如何用CSS实现固定Table表头和第一列。固定Table表头和第一列CSStable{font-family:"Fraunces",serif;font-size:125%;white-space:nowrap;margin:0;borde...

HTML表格固定第一行第一列效果

11-06

在网页上实现类似Excel的效果，数据滚动条拖动固定第一行和第一列，附代码备注，一目了然

参与评论您还未登录，请先登录后发表或查看评论

table-固定首列

weixin_42979149的博客

03-11

2341

首先，table外层套两层div，outerDiv和 innerDiv &amp;lt;div class=&quot;outerDiv&quot;&amp;gt; &amp;lt;div class=&quot;innerDiv&quot;&amp;gt; &amp;lt;table border=&quot;0&quot;

【el-table】横向滚动条加粗后，滚动到固定列下被遮挡，已解决

热门推荐

下一个转角的博客

12-28

1万+

表格:为外层div绑定scroll事件 css：设置tr的

table固定首行首列css 最简单方法（亲测可用）

weixin_49798182的博客

05-30

4828

业务需要前端使用html 写了个table 如图：需要滚动条上下左右滑动，但是固定首航首列关键代码：/* 首列固定 */left: 0;z-index: 1;/* 表头固定 */top: 0;z-index: 2;/* 表头首列强制最顶层 */z-index: 3;解析：关键属性 css :在视口滚动到元素 top 距离小于 0px 之前，元素为相对定位。之后，元素将固定在与顶部距离 0px 的位置，直到视口回滚到阈值以下；同理。

移动端table固定表头与固定第一列

02-20

移动端项目，移动端table固定表头与固定第一列,HTML5和css3

bootstrap-table实现表头固定以及列固定的方法示例

10-17

这样即使用户滚动页面查看表格内容时，固定的表头或列依然可见，方便用户快速识别数据所在的列和行。首先，要使用bootstrap-table实现表头固定以及列固定的功能，需要引入对应的JavaScript和CSS文件。这包括jQuery...

html5 表格纵向滚动条,纯css实现table的表头固定tbody内容显示垂直滚动条

weixin_35937871的博客

06-03

2323

最近在做项目是经常用到table表格来做数据统计，数据少时还好，但是数据多就会导致整个页面看起来乱，用户体验不好，为了使得用户体验更好，所以就会为table的内容上显示滚动条，这样即使再多的数据也不怕因为过多导致页面显示难看。实现的方法有很多，这里列举几个比较好的整理下来，作为一个学习笔记，也为需要的小伙伴提供思路。首先要明确我们需要完成的效果：1.固定表头2.table垂直滚动条3.table列...

antd中table表格实现列内的滚动

Zeng__Yi的博客

11-26

9293

不设置列内滚动的效果：设置之后的效果：当有一列的数据特别多，如果不设置滚动就显得很不好看。实现方法：在columns中在这一列设置样式，columns中设置了列的宽度，是要再设置列的高度，溢出滚动就可以实现了代码： { title: '评价内容', dataIndex: 'evaluation', width:'180px', render:(text)=&...

10.html中固定table的第一列.docx

07-14

近来浏览一个网页，发现它有一个列表页面，列表中展示的字段特别多，因此数据展示区域产生了横向滚动条，当向左拖动滚动条的时候，表格的第一列和第二列并不随着滚动条的移动而移动。主要信息一直的用户的视线中，辅助信息可以滚动显示，用户交互性更好，因此就研究了一下这种展现方式的实现事宜。

javascript 绘制表格table,可以固定首行,首列

12-22

javascript 绘制表格table,可以固定首行,首列,其他内容滚动显示.兼容ie,firefox,chrome等浏览器.

完美解决table首行首列固定滚动条适应表格宽度

01-20

1、数据较多时需要横向竖向滚动，很多数值记不清谁是谁了，所以需要主要标题内容需要固定。 2、通常的首行首列的固定，下方滚动条左侧会空缺一块，不够美观，我加了一层悬浮的div 给予适应

html的table滚动时固定首行和首列

11-26

html的table滚动时固定首行和首例，网上多为3个table拼合实现，现使用一个table实现

table固定表头固定列源码

06-03

table表格固定表头与固定列的源代码，用css样式来设置，只支持ie系统浏览器

table表格实现第一列固定

qq_38662977的博客

04-26

2682

首先是css的样式，根据自己页面再调整宽高之类的属性，这里是我自己页面的： table { table-layout:fixed; } th { position:-webkit-sticky; position:sticky; } thead tr th { top:0; } thead tr th:first-of-type { left:0; z-index:1; width:200px} ...

要固定table表格的第一行(列)或某几行（列）不随滚动条滚动

weixin_46323078的博客

12-11

1807

在上面的代码中，我们将表格包装在一个具有垂直滚动条的容器中（.table-test）。然后，我们为需要固定的行（在这里是第一行添加了一个类名（.sticky-row）。属性将元素的位置设置为粘性定位，并使用top: 0;属性，当表格内容超出容器高度时，会出现垂直滚动条，从而使固定的行能够保持可见。要固定表格的第一行或某几行不随滚动条滚动，可以使用CSS的position: sticky属性和额外的HTML标记来实现。如果要固定多行，请给需要固定的行都添加.sticky-row类名，并应用相同的CSS样式。

table一列固定

大山博客

05-14

5352

例图暂无例图，图插不上 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8...

固定table的第一行（表头），不随纵向滚动条滚动，但能横向滚动

07-09

要固定表头并允许横向滚动，你可以使用 CSS 中的 `position: sticky` 属性来实现。首先，确保整个表格包含在一个固定大小的容器中，例如一个 `<div>` 元素。然后，在 CSS 中为该容器设置 `overflow-x: auto`，以便在需要时显示横向滚动条。接下来，在表格的 `<thead>` 元素中添加样式 `position: sticky; top: 0;`，这将使表头在垂直方向上固定在容器顶部。以下是一个示例代码： ```html <div style="width: 100%; overflow-x: auto;"> <table> <thead style="position: sticky; top: 0;"> <tr> <th>表头1</th> <th>表头2</th> ＊＊＊