首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

固定表头滚动表体的表不让tbody滚动

是一种常见的前端开发需求,可以通过以下方式实现:

  1. 使用CSS的position属性和overflow属性来实现固定表头和滚动表体的效果。具体步骤如下:
    • 将表格外部包裹在一个固定高度的容器中,设置该容器的overflow属性为auto,使其具有滚动条。
    • 将表头部分放在一个固定位置的容器中,设置该容器的position属性为fixed,使其固定在容器的顶部。
    • 将表体部分放在一个容器中,设置该容器的overflow属性为auto,使其具有滚动条。
    • 示例代码如下:
    • 示例代码如下:
    • 示例代码如下:
  • 使用JavaScript库或框架来实现固定表头滚动表体的效果。例如,可以使用jQuery的插件如"fixedHeaderTable"或"floatThead"来实现该功能。这些插件提供了简单的API和配置选项,可以轻松地实现固定表头和滚动表体的效果。
  • 示例代码如下:
  • 示例代码如下:
  • 示例代码如下:

以上是实现固定表头滚动表体的两种常见方法。根据具体的项目需求和技术栈选择适合的方法进行实现。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

table固定表头tbody滚动条样式设置以及填几个坑

工作中或许会用到 table 表格固定表头tbody 滚动效果。为了方便我这里直接用 Bootstrap 表格样式。 ?...比较常用方法是,将 table thead 和 tbody 拆分成两个表格,用 div 包起来,给 div 设置固定高度和 overflow: auto; 属性(其实只给 tbody table...      也可以直接用 CSS 选择器进行固定宽度: .table td:first-child,.table th:first-child{     width...: 200px; } 注意,这里表头是 th ,是 td ,都需要设置宽度。...可以参照 CSS滚动条选择器设置滚动样式,如下。 以下伪元素选择器可以修改 webkit 浏览器滚动条样式: ::-webkit-scrollbar 整个滚动条.

11.8K20

动手练一练,手写一个价格对比、固定表头滚动表格

虽然有不少相关插件提供了类似的功能,比如 ScrollMagic.js,但是今天实例,我们将用纯原生方式进行实现,当滚动滚动至表格位置,固定表头位置,表格内容查看完后,取消固定表头功能。...今天我们将通过一个界面十分漂亮功能价格对比表格,展示固定表头功能,实例操作展示如视频所示,当滚动滚动至表格位置,添加表头固定样式,当滚动至表格底部,移除固定表头样式。...3、编写滚动相关逻辑 每次我们滚动时,就会执行我们定义 scrollHandler 函数,我们这个函数只会在窗口宽度大于 780px 才会执行固定表头逻辑,小屏设备则没有相关效果。...如果还在滚动表格内容,我们将添加固定表头样式stickyClass,移除取消固定样式sticky2-table。...如果滚动滚动至第三部分内容区域,我们将移除固定表头样式stickyClass,添加移除固定表头样式 sticky2-table。

3.2K31

React:Table 那些事(3-2)—— 斑马纹、固定表头

下面实现复杂一些 固定表头效果 4. 固定表头 - UI 效果 固定表头就是 当有竖向滚动条且[竖向]滚动表头固定不动效果 ? 5....固定表头 - API 接口 固定表头通常是 表格高度控制附加效果 ? 6. 固定表头 - 注意事项 【第一】 固定表头是动态效果 由 Table 高度、数据量共同作用 ?...【第二】 数据区出现竖向滚动条时 表头尾必须留出滚动条宽度 否则会出现列对不齐现象 ? ? 【第三】 表头尾由独立结构组成 当区域横向滚动表头尾要能够同步滚动 ?...固定表头 - 代码实现 【第一】 表头同步横向滚动通过 onScroll 实现 ?...【第二】 动态计算是否存在竖向滚动条 决定是否在表头中增加 gutter 避免表头对不齐 ?

3.8K10

用canvas画了个table,手写滚动

在开始本文之前,主要是从以下方向去思考: 1、canvas绘制table必须满足我们常规table方式 2、因为table内容是显示在画布中,那如何实现滚动条控制,canvas是固定 3、内容分页显示需要自定义滚动条...canvas画个table 首先我们确定一个普通就是header和body组成,在html中,我们直接用thead与tbody以及tr,td就可以轻松画出一个,或者用div也可以布局一个table...,不过是从第三根横线开始绘制,因为表头已经占用了两根横线了,所以我们看到是从第三根横线位置开始,竖线是将表头一起绘制,然后就是填充数据内容 所以我们看到canvas绘制表就是下面这样 自定义滚动条...3、还有我需要添加全选功能,以及支持隐藏表头,以及自定义渲染对应内部,比如我是通过定位方式去显示我们对应canvas自定义内容,除了这种方案,还有更好办法吗?...总结 canvas实现一个简易table,如何绘制table表头,以及内容 如何手写个滚动条,并且滚动条边界控制,滑动画布,控制滚动条位置 canvas绘制table如何自定义dom渲染,主要是采用定位方式

4.6K20

jQuery 表格插件汇总

本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等。...Chromatable JQuery Plugin - 固定表头,可滚动内容区,内容区滚动时候表头位置保持不变。 ? ?...将表头部分放入 THEAD 区,内容部分放入 TBODY 区,脚注部分放入 TFOOT 区域,引用 webtoolkit.scrollabletable.js 文件,然后在每个表格后面创建 ScrollableTable...HeatColor - 根据规则,或自动对表格中值进行分析,对不同范围值按不同颜色区分。 ? ? Fixed Header Table - 固定表头滚动表格 ? 表格搜索,筛选 ?...Tablesorter 2.0 - 将普通,拥有 THEAD 和 TBODY 标签表格转换为可排序表格,可以分析多种数据,支持多列排序。 ? ?

7.4K10

一件事让客户成为你忠实用户!

表格组成 筛选区、功能性按钮、表头、底栏。 表格组件 表格功能 01 筛选区设计 高级筛选(录入收折叠式)-录入展开式 高频筛选字段外露,低频筛选隐藏。...但表头筛选在复杂业务系统中存在几个弊端: 数据集往往很庞大,表格不能展示所有字段,往往采用列固定形式来呈现数据完整性。筛选前需先对表格进行横向滚动,无端增加操作。...表头 04 设计 即为数据呈现方式,以及承载着各种数据操作入口,因此尤为重要。...横向滚动条:当表格宽度过长时,应出现横向滚动条,不能造成其中一列或者几列被严重挤压;特殊列适当固定。...固定:当出现横向滚动条时,操作列应该被固定住。

1.5K10

TDesign 更新周报(2022 年 4 月第 2 周)

由之前两个 table 分别渲染 thead 和 tbody,更为一个 table 行拖拽排序功能,使用方法有调整,从 sortOnRowDraggable 更为 dragSort='col' 表头更为使用...(改动之前为:滚动一直触发) 修复 Table 若干 Bug Features 新增 Collapse 组件,使用 Composition api 新增 Message fadeIn and fadeOut...新增 Table 特性 排序交互变更:排序方式支持点击直接排序 优化表格最后一列 ellipsis 浮层位置底部右对齐 新增超出省略功能, ellipsis 支持透传 Popup 组件全部属性 新增尾合计行...(props.filterIcon) 均可 新增全局配置:过滤图标、空元素、异步加载文本配置、排序按钮文本配置 新增 scroll 滚动事件 新增表头吸顶功能 新增综合功能:多级表头 + 固定表头 +...固定列 + 表头吸顶 + 虚拟滚动 + 自定义列配置 过滤功能,条件为真时,高亮筛选图标 新增列拖拽排序功能,通过拖拽手柄调整表格排序 详情见:https://github.com/Tencent/tdesign-vue-next

2K10

LayUI之旅-数据表格

table容器默认宽度是跟随它父元素铺满,你也可以设定一个固定值,当容器中内容超出了该宽度时,会自动出现横向滚动条。...table容器默认宽度是跟随它父元素铺满,你也可以设定一个固定值,当容器中内容超出了该宽度时,会自动出现横向滚动条。...true fixed String 固定列。可选值有:left(固定在左)、right(固定在右)。一旦设定,对应列将会被固定在左或右,不随滚动条而滚动。...注意:如果是固定在左,该列必须放在表头最前面;如果是固定在右,该列必须放在表头最后面。 left(同 true) right hide Boolean 是否初始隐藏列,默认:false。...true fixed String 固定列。可选值有:left(固定在左)、right(固定在右)。一旦设定,对应列将会被固定在左或右,不随滚动条而滚动

4.3K30

TDesign 更新周报(2022年4月第1周)

(改动之前为:滚动一直触发) Table: 自定义列配置功能:多级表头和列显示配置同时存在时,无法进行正确列配置问题,列配置仅显示了第一层表头 verticalAlign 不生效问题 右上角出现文字穿透问题...固定表头固定列,全部使用 CSS sticky 输出样式,组件仅渲染一个表格,表头内容 不再分开渲染输出。...修复,排序图标和过滤图标同时存在时,样式异常问题 Features Table: 新增超出省略功能, ellipsis 支持透传 Popup 组件全部属性 新增尾合计行,支持固定在底部,支持多行合计...,支持完全自定义内容 新增 loadingProps 透传加载组件全部特性 新增固定行(冻结行) 支持虚拟滚动 新增排序图标自定义,插槽 (slot='filterIcon') 和渲染函数 (props.filterIcon...) 均可 新增全局配置:过滤图标、空元素、异步加载文本配置、排序按钮文本配置 新增 scroll 滚动事件 新增表头吸顶功能 新增综合功能:多级表头 + 固定表头 + 固定列 + 表头吸顶 + 虚拟滚动

2.4K20

「趣学前端」优雅又精致,来看看别人家表格样式是怎样实现

我为单元格都设置右侧和下侧边框,所以表格最外层只需要设置左侧边框即可,border-left: 2px solid #916dd5。 表头固定表格 表头固定,即不随表格内容滑动一起滑动。...前面的篇章提到过吸顶效果,实现思路是一致表头设置黏性定位,即position: sticky。就可以实现固定效果。...粘性定位元素是依赖于用户滚动,在 position:relative 与 position:fixed 定位之间切换。...它行为就像 position:relative; 而当页面滚动超出目标区域时,它表现就像 position:fixed;,它会固定在目标位置。...注意: rowspan="0" 告知浏览器使单元格横跨到表格组件中最后一个行(thead、tbody 或 tfoot)。 colspan 属性定义表头单元格应该横跨列数。

1.6K20

QListWidgetQSS用法「建议收藏」

和QListWidget样式设置,滚动样式设置 一、QListWidget使用 //一、QListWidget list_widget = new QListWidget(); //list_widget...设置ListWidget是否可以自动排序,默认是false //list_widget->setSortingEnabled(true); //设置QLisView大小改变时,图标的调整模式,默认是固定...(false); //隐藏行表头 //5、对表头文字字体、颜色进行设置 //获得水平方向表头item对象 QTableWidgetItem *columnHeaderItem = table_widget...),行还在 //tableWidget->clear(); //只清除中数据,不清除表头内容 //tableWidget->clearContents(); //连行也清除 //tableWidget...(QAbstractItemView::ScrollPerItem); //去掉自动滚动条 //tableWidget->setAutoScroll(false); 三、可以使用.qss设置样式 //

4.3K31

5.HTML表格列表标签元素介绍

属性: rowspan: 属性指示单元格扩展行数,其默认值为1;如果其值设置为0,则它将一直延伸到单元格所属节(、、,即使隐式定义)末尾 colspan...这些单元格可以被放在表头左侧或右侧,取决于 元素中 dir 属性值。 colgroup: 表头属于一个列组并与其中所有单元格相关联。...> WeiyiGeek.table表格综合示例1结果图 ---- colgroup 标签 描述: 在 HTML 中 表格列组(Column Group )标签用来定义一组列表...thead 标签 描述: 该元素定义了一组定义表格列头行, 通常该元素应该与 和 元素结合起来使用,用来规定表格各个部分(表头、主体、页脚)。...通过使用这些元素,使浏览器有能力支持独立于表格表头和表格页脚表格主体滚动,当包含多个页面的长表格被打印时,表格表头和页脚可被打印在包含表格数据每张页面上。

1.4K30

HTML入门与进阶以及HTML5

tbody table body 身 tfoot table foot 脚 th table header 表头单元格 td td 身单元格 4、列表 3种列表语义记忆: 标签 语义 说明...和标记着单元格开始和结束。 (三)、表格完整结构 表格完整结构应该包括表格标题(caption)、表头(thead)、身(tbody)和脚(tfoot)4部分。...>      说明: 、和这三个标签分别表示表头身、脚。...thead、tbody和tfoot这3个标签把表格从语义上分为三部分: 表头身和脚。有了这几个标签,表格语义更加良好,结构更加清晰。...2-1 表格标签 标 签 说 明 table 表格 caption 标题 thead 表头(语义划分) tbody 身(语义划分) tfoot 尾(语义划分) tr 行 th 表头单元格

4.7K30

HTML入门与进阶以及HTML5

tbody table body 身 tfoot table foot 脚 th table header 表头单元格 td td 身单元格 4、列表 3种列表语义记忆: 标签 语义 说明...和标记着单元格开始和结束。 (三)、表格完整结构 表格完整结构应该包括表格标题(caption)、表头(thead)、身(tbody)和脚(tfoot)4部分。...> 说明: 、和这三个标签分别表示表头身、脚。...thead、tbody和tfoot这3个标签把表格从语义上分为三部分: 表头身和脚。有了这几个标签,表格语义更加良好,结构更加清晰。...2-1 表格标签 标 签 说 明 table 表格 caption 标题 thead 表头(语义划分) tbody 身(语义划分) tfoot 尾(语义划分) tr 行 th 表头单元格

3K30

第3天:CSS浮动、定位、表格、表单总结

7、overflow:hidden;清除浮动(给浮动元素父级加) 需要配合宽度、zoom兼容IE6、IE7 scroll(滚动条) overflow:hidden/scroll/auto 三、浏览器 BFC...(标准浏览器) 1、float值不为none 2、overflow值不为visible 3、display值为table-cell,table-caption,inline-block中任何一个...固定定位(fixed) 1、固定右下角 position:fixed; right:0; bottom:0; 与绝对定位特性基本一致。始终相对整个文档进行定位;IE6不支持固定定位。...六、表格(table) thead(表头)、tbody(表格主体)、tr(表格行)、th(元素定义表头)、td(元素定义表格单元) 表格样式重置 table{border-collapse:collapse...button 按钮 image 图片 file 上传 hidden 隐藏不让用户看到

1.6K40

WPF 表格控件 ReoGrid 简单使用

参见 GitHub 上一个 issue:https://github.com/unvell/ReoGrid/issues/410 ,简单来说就是拖动滚动条到最边上,3.0.0 版本会出现多余空白,如果固定表头...以上方法依次进行了如下操作:去除了选择样式,冻结了前两行和第一列(固定表头),去除了行和列序号,设置只读,设置需要显示行和列范围。...效果如下: 可以看到固定表头后还是会有表头线突出,这是因为窗体(或者说显示范围)比表格内容区域大,实际使用时可通过设置合适显示大小,ReoGrid 控件会自动出现滚动条,即可解决这个问题(3.0.0...版本不行),如下所示: 可以看到,滚动条滑到最边上,并没有空白出现,也就看不到突出表头线了。...这里如果要支持表头固定,就要用控件自己添加 ScrollViewer,也就不能直接用那个方法,所以我改了个专用方法。

3.2K10
领券