html 控制表格Tbody内容滚动

最新推荐文章于 2024-06-17 16:30:49 发布
最新推荐文章于 2024-06-17 16:30:49 发布
阅读量3.8k 收藏
点赞数 2
分类专栏： 工作中的坑 文章标签： 表格 html tbody thead
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/typeof_yaco/article/details/53765403
版权

html里面表格是不容易控制的元素，我在项目中遇到过想让tbody内容超出后滚动，我尝试了很多办法，比如把thead设置position：absolute；再设置top啊，margin啊。。。都感觉不太好。


直接设置tbody  overflow：scroll / auto； 是不管用的，要把


thead 和 tbody 都设置display：block；


tbody还要设置height，和td宽度，不会再跟thead对齐了。


到此完美解决!

牙汤
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
table 控制多行 显示与隐藏
qingfengxia2013的专栏
09-22 1295
开发过程中常遇到一个table中的一行或多行需要进行显示或隐藏控制。通常我们会想到给tr加个ID，这样做当然可以达要想要的效果，但重复代码太多，一般不用于多行的控制，对CSS有所了解的人这个时候就会想到用div来控制行了，但事实上，table中的div是只读的，它的style是不允许我们改变的，所以这个办法就失败了。所以最终的解决的办法是用tbody这个标签来实现div的效果。具体形式如下： &...
HTML-DIV 限制显示行数
QQ26843500的博客
07-10 235
div显示限定行数
＜tbody＞出现滚动条后，同＜thead＞对不齐的解决方案
最新发布
ElectronStorm的专栏
06-17 347
第四步，编写js，当表体.scrollHeight > 表体.clientHeight时，表明出现了滚动条，则为表头添加scroll-thead样式，同时为表格整体添加scroll-table样式。否则就为表头添加.no-scroll-thead样式，同时为表格整体添加no-scroll-table样式即可。如上处理后，表头和表体能对齐，但如果表体出现滚动条，两者就会对不齐了。第一步，将table和thead分别加上ref（refTable, refTHeader)需求是需要表格滚动，并且表头不动。
html 限制文本的显示行数,CSS -webkit-line-clamp限制文本行数
weixin_34464974的博客
06-15 503
-webkit-line-clamp限制在一个块元素显示的文本的行数。-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property)，它没有出现在 CSS 规范草案中。为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。-webkit...
css tr标签自动换行,HTML中table设置td标签内容过多自动换行
weixin_29608475的博客
08-03 2203
今天遇到一个小问题，需要解决table标签中td标签内容过多自动换行的问题。因为之前有经验(无论是内容过多省略显示还是内容过多换行都做过)，这次的需求是内容过多换行显示。首先在 table 上增加style=”table-layer:fixed” ;然后在 td 上增加 style=”WORD-WARP:break-word” 。果然，td的内容完全显示了。最开始的效果但是貌似格式错了。...
HTML table表格 固定表头 tbody加滚动条
沐枫
12-31 2万+
纯CSStable表格thead固定tbody滚动效果 由于项目需要，在表格中，当数据量越来越多时，就会出现滚动条，而在滚动的过程中，默认情况下表格头部会跟着表格内容一起滚动，导致看不到头部对应的字段名，影响体验效果！ 实现思路： 将内容要滚动的区域控制在 tbody 标签中添加 overflow-y:auto; 样式，给 tr 标签添加table-layout:fixed;...
html中table固定头部表格tbody可上下左右滑动
01-19
当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下： html代码： <th><div>标题一</div></th> <th><div>标题二</div></th> <th><div>标题三</div></th> <th>...
bootstrap表格固定表头并且tbody部分添加滚动条
10-24
这样，当用户滚动内容时，表头始终保持可见，便于对照数据。本文将深入探讨如何实现Bootstrap表格的这一功能。 首先，要理解Bootstrap表格的基本结构。一个基本的Bootstrap表格由`<table>`标签开启，包含`<thead>`...
jQuery实现表头固定表格内容滚动效果
11-02
在网页设计中，当表格数据过多时，为了保持良好的用户体验，常常需要实现表头固定而内容可滚动的效果。`jQuery`作为一个广泛使用的JavaScript库，提供了丰富的功能和便利的方法来实现这种效果。本教程将深入探讨如何...
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法
08-29
table表格，让thead固定，tbody有滚动条， 关键是都对齐的纯css写法关键是都对齐的纯css写法
jsp中为表格添加水平滚动条的方法
10-21
1. **HTML表格基础**： 首先，我们需要创建一个基本的HTML表格。表格由`<table>`标签定义，`<tr>`标签用于创建行，`<th>`用于定义表头，而`<td>`用于定义单元格数据。 ```html 表头1 表头2 ... ...
如何用纯CSS固定thead实现表格滚动？tbody设置overflow之密
Vilien (Mr.Bin) 技术笔记
07-29 9896
首先，大家是不是在做下面代码这样的尝试？ THEAD-TD1THEAD-TD2 style="height:100px;overflow:auto;"> TBODY-TD1TBODY-TD2 TBODY-TD1TBODY-TD2 TBODY-TD1TBODY
自定义滚动条、tbody加滚动条
你的小可爱的博客~
08-23 1238
tbody加滚动条，自定义滚动条
原生table:表格table中thead固定，tbody超出高度出现滚动条
热门推荐
qq_37899792的博客
05-16 2万+
首先认识一下表格的table-layout属性 tableLayout 属性用来显示表格单元格、行、列的算法规则。 tableLayout有如下三个值：autofixedinherit 值 描述 auto 默认。列（td，th）宽度由单元格内容设定。 (1) 给td指定的width不一定生效，td的width会自动调整 (2) text-overflo...
【html】table表格数据无缝循环滚动
德仔
09-27 3977
分享一个好看的表格无缝滚动:(实战用起来很舒服)分享一个好看的表格无缝滚动:(实战用起来很舒服)
html 表格
Toml_的博客
03-06 62
表格由 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。以上代码只是用table定义了一个表格，其中边框为1像素，宽高，水平居中。3.tr定义一行 td定义一列 th定义主列 标签加粗。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
table tbody内容滚动
weixin_46544600的博客
12-09 147
【代码】table tbody内容滚动。
html&css的简单了解
m0_50496669的博客
09-07 1244
html&css html： 常用的标签： div、p、ul li、ol li、h1-h6、a、span、b、u、i、input（属性text、number、password、radio、checkbox、submit、reset）、form、select>option、textarea h5(新标签）：header、nav、footer、main、section、video、audio、input（color、range、week、date） 标签的分类： 单双标签：单标签没有与之对
可滚动的 tbody
张营的技术博客
09-28 281
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .fixed_header{ width: 400px; } .fixed_header thead { backgro
html 大屏表格滚动
09-09
在HTML中，可以通过一些技术实现大屏表格的滚动效果。 一种常见的方法是使用CSS样式和固定表头。通过将表格放置在一个固定高度、具有滚动条的容器中，可以使表格在滚动时保持表头始终可见。具体步骤如下： 1. 创建...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值