TBody scrollbar 设置

最新推荐文章于 2022-08-23 10:53:12 发布
最新推荐文章于 2022-08-23 10:53:12 发布
阅读量117 收藏
点赞数
原文链接：http://www.cnblogs.com/RonnieQin/p/9263082.html
版权

由于scrollbar自身有宽度 对于tbody来说可能会挤压与thead不对齐下面办法能够解决大致问题

1.设置tbody display：block ；  overflow-y：auto；（并且修改scrollbar的自身样式使之宽度尽量小）

2.tbody下的tr设置 display：table

3.tbody下的td设置display：table-cell

转载于:https://www.cnblogs.com/RonnieQin/p/9263082.html

weixin_34293902
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Jquery设置表头固定
08-05
在设置表头固定的过程中，Jquery可以帮助我们轻松地绑定事件、获取和修改DOM元素，以及实现动态效果。 首先，我们需要创建一个包含表头和主体的表格结构。HTML代码可能如下： ```html 列1 列2 列3 ...
纯CSS实现的表格滚动条效果
02-16
CSS3引入了一些新的伪元素和属性，如`::-webkit-scrollbar`、`::-webkit-scrollbar-thumb`和`::-webkit-scrollbar-track`，它们允许我们自定义滚动条的外观。例如，我们可以设置滚动条的宽度、颜色、背景以及鼠标...
可滚动的 tbody
张营的技术博客
09-28 279
<!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
自定义滚动条、tbody加滚动条
你的小可爱的博客~
08-23 1235
tbody加滚动条，自定义滚动条
table设置tbody滚动条
G_ruirui的博客
01-13 1691
table tbody { display: block; height: 400px; overflow-y: scroll; } table thead, tbody tr, tfoot tr { display: table; width: 100%; height: 40px; table-layout: fixed; font-size: 16px; text-align:center; } t
HTML table表格 固定表头 tbody加滚动条
沐枫
12-31 2万+
纯CSStable表格thead固定tbody滚动效果 由于项目需要，在表格中，当数据量越来越多时，就会出现滚动条，而在滚动的过程中，默认情况下表格头部会跟着表格内容一起滚动，导致看不到头部对应的字段名，影响体验效果！ 实现思路： 将内容要滚动的区域控制在 tbody 标签中添加 overflow-y:auto; 样式，给 tr 标签添加table-layout:fixed;...
CSS 设置table下tbody滚动条
weixin_30522095的博客
06-27 94
table tbody { display:block; height:195px; overflow-y:scroll; } table thead, tbody tr { display:table; width:100%; table-layout:fixed; } table thead { width...
利用JS+CSS实现滚动表格数据展示
06-06
接着，我们用CSS来设置表格的样式，特别是滚动条的样式。CSS允许我们定制滚动条的外观，使其与页面设计更加融合。以下是一些基本的CSS样式： ```css #scrollTable { width: 100%; overflow-y: auto; scrollbar-...
jQuery头部固定表格滚动条代码
06-24
例如，可以为thead和tbody设置不同的CSS类，便于区分和操作。 ```css #scrollTable { width: 100%; overflow-x: auto; } thead { background-color: #f8f9fa; /* 设置背景色 */ } ``` 3. **jQuery代码**：接...
CSS教程 汇总让IE6崩溃的几种方法
09-25
1. 设置`scrollbar-base-color`并结合CSS定位与JavaScript改变定位 IE6在处理滚动条颜色和定位方面存在一个已知问题。当为`table`设置绝对定位，并在CSS中定义`scrollbar-base-color`，然后通过JavaScript改变`table...
tbody超长显示滚动条
Knight_Key的博客
01-18 1687
头文件加样式 <style> table tbody { display:block; height:195px; overflow-y:scroll; } table thead, tbody tr { display:table; width:100%; table-layout:fixed; } table thead { width: calc( 100% - 1...
通过css样式给表格tbody加垂直滚动条
weixin_30321709的博客
08-21 847
tbody加滚动条实现思路： 1，把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto。 2，把thead的tr设置成display:block。 3，因为都设置成block所以要给td手动添加宽度。 4，考虑到 tbody 产生了滚动条，这时会影响tbody以及thead的宽度，可以采用针对tbody设置::-webkit-...
实现table 表体tbody滚动 表头不滚动
web全栈开发的博客
01-20 1741
实现table 表体tbody滚动 表头不滚动 以前试过很多办法都是不怎么理想 以下方法可以效果体验感觉是比较好的 <div class="w-100" style="overflow-y: auto;overflow-x: auto;max-height: 300px;" > <table border="1" cellspacing="" cellpadding="" class="w-550 m-t-10 tc" v-if="item.show"> &l
简单的自定义固定表头thead tbody滚动 第二版
RD_moon的博客
09-06 3496
固定表头thead  ，之前在网上看到的各种方法，感觉都不是我想要的结果，自己尝试写了一下，当然，网上也有插件可以用，自己百度一下，引入了插件后，一行代码就搞定；
如何用纯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
原生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...
CSS 设置table中tbody的自定义滚动条
grootbaby
08-28 1127
&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;CSS教程&lt;/title&gt; &lt;style&gt; /* 自定
自定义 body 滚动条
文龙刚的博客
03-03 703
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>自定义滚动条&l.
嵌入上下滚动按钮
na_na_er的专栏
01-04 722
 html>head>STYLE>...BODY {...}{    SCROLLBAR-FACE-COLOR: #ffffff;  SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #00
css table tbody 设置高度没有对齐
最新发布
09-04
当我们在CSS中设置table的tbody元素的高度时，有时候会发现它没有对齐。这可能是因为其他一些CSS样式或属性的影响。 首先，确保table元素的样式没有设置vertical-align属性。这个属性会影响tbody的对齐方式。默认情况下，vertical-align属性是设置为"middle"的，这可能导致tbody在竖直方向上没有对齐。 其次，如果table元素的高度设置为100%或一个固定的像素值，那么tbody元素的高度设置也要考虑到这个因素。如果table的高度没有确定的值，那么tbody的高度设置为100%是没有效果的，因为它没有参照物。 另外，确保table元素没有设置border-collapse属性为collapse。当border-collapse属性为collapse时，table元素的边框会消失，并且tbody元素的高度设置可能会受到影响。 最后，还需要考虑到内容的多少和表格样式的影响。如果表格的内容超过了tbody元素的高度，那么它可能会溢出。可以尝试设置overflow属性为auto或scroll来解决这个问题，从而出现滚动条以容纳更多的内容。 总结起来，要解决tbody元素高度没有对齐的问题，我们需要注意以下几点：排除其他CSS样式或属性的影响，设置table元素和tbody元素的高度时要考虑到它们之间的关系，检查border-collapse属性的值是否合适，以及考虑内容多少和滚动条的处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值