使用div给单元格td增加滚动条效果

最新推荐文章于 2024-01-09 15:09:39 发布
最新推荐文章于 2024-01-09 15:09:39 发布
阅读量1.2k 收藏
点赞数
分类专栏： 脚本语言[工具] 文章标签： div scroll table html firefox 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rainv/article/details/1526062
版权

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 <title>无标题文档</title>
 </head>
 <STYLE type=text/css>td {
 SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #dfdfdf; SCROLLBAR-DARKSHADOW-COLOR: #dfdfdf; SCROLLBAR-BASE-COLOR: #dfdfdf
}
</STYLE>
 <body>
 
   <table width="100%" align="center">
   <tr>
 
   <td align="center">
    <div  style="overflow-x:scroll; width:697px; height:212px;">
    <table width="100%">
    <tr>
    <td>
   <img src="d:/ddd.bmp" width="200px" height="200px">
   </td>
   <td>
   <img src="d:/ddd.bmp" width="200px" height="200px">
   </td>
   <td>
   <img src="d:/ddd.bmp" width="200px" height="200px">
   </td>
   <td>
   <img src="d:/ddd.bmp" width="200px" height="200px">
   </td>
   </tr>
   </table>
    </div>
   </td>
   </tr>
     <tr>
   <td align="center">
    <div  style="overflow-x:scroll; width:697px; height:212px;">
    <table width="100%">
    <tr>
    <td>
   <img src="d:/ddd.bmp" width="200px" height="200px">
   </td>
   <td>
   <img src="d:/ddd.bmp" width="200px" height="200px">
   </td>
   <td>
   <img src="d:/ddd.bmp" width="200px" height="200px">
   </td>
   <td>
   <img src="d:/ddd.bmp" width="200px" height="200px">
   </td>
   </tr>
   </table>
    </div>
   </td>
    
   </tr>
 </table>
 </body>
 </html>
 
用firefox不支持div的滚动条效果。
倒塌。ie才能看到。

rainv
关注
专栏目录
自己写的一个滚动条
08-24
自己写的一个滚动条，只能改变纵向滚动条的样式，包括颜色宽度
th固定 td滚动的表格实现
weixin_34343000的博客
08-29 159
为什么这样？ 体验好 原理 通过两个表格，使其th td 对应，产生一种错觉。 代码 1.html <div class="content"> <div class="table-head"> <table> <colgroup> ...
给td加滚动条
Gala_L的博客
11-26 1028
table里的td没有办法直接加滚动条， 需要在里面套一个div才可以。 html: &lt;table border="1" cellspacing="0"&gt; &lt;tr&gt; &lt;th&gt;aaaa&lt;/th&gt; &lt;td colspan="3"&gt;aaaaaaaaaaa&lt;
给td添加滚动条
三千炼心的博客
06-12 3625
<td class="rigthtd" style="width: 40%"> <div style="overflow-y:scroll;height:60px;white-space:pre-wrap"> ${position.specificTasks} </div> </td> td本身是没有滚动条的，换行只会强行增...
table中一个td设置了相对定位，导致另一个td中的div滚动条失效问题
qq_35474948的博客
07-09 436
原因是td默认的display属性为table-cell,当一个td设置了相对定位，会导致另一个td中的div滚动条失效 解决方案：将该滚动条所在的td的display属性设为block或inline-block ...
给DIV添加滚动条的实现代码
09-25
要为 DIV 添加滚动条，只需要在 DIV 元素中添加 `overflow` 属性，并将其值设置为 `auto`。例如： ``` <div style="position:absolute; height:400px; overflow:auto"></div> ``` 这样，当 DIV 元素中的内容超过其...
div的滚动条如何实现
12-13
当内容超过 `div` 的设定高度或宽度时，我们可以通过设置 `overflow` 属性来控制是否显示滚动条，以及滚动条的行为。下面将详细介绍如何在 `div` 中实现滚动条及其相关设置。 首先，要让 `div` 显示滚动条，我们...
html小技巧之td,div标签里内容不换行
10-25
为了避免这种情况，可以适当调整容器的宽度或者通过添加滚动条的方式来处理过长的内容。 总结起来，在`<td>`和`<div>`标签中控制内容不换行，可以通过`<nobr>`标签和CSS样式`white-space: nowrap;`两种方法来实现。...
jsp中实现带滚动条的table表格实例代码
10-21
在网页设计中，有时我们需要展示大量的数据，这时使用带有滚动条的表格就显得尤为重要。本文将详细介绍如何在JSP（JavaServer Pages）中实现一个带有滚动条的table表格，通过实例代码来帮助理解这一功能。 首先，让...
Jquery表格添加滚动条插件，固定表头
07-27
本话题将深入探讨如何使用jQuery实现表格添加滚动条的功能，并固定表头，这在处理大量数据时非常有用，因为可以保持表头可见，方便用户在滚动时查看列名。我们将基于提供的"superTables.js"和"superTables"这两个...
table th、td设置最大高，超高度出现滚动条
xjh的博客
08-17 5979
th、td最大高超出滚动，table border随滚动条移动
如何在<td></td>添加滚动条
u012991190的博客
03-30 5532
html的表格设置单元格的高度以及添加滚动条
【转】给TD添加滚动条的方法
weixin_34110749的博客
06-27 172
TD本身不允许出现滚动条，而会总动撑大，所以要想加滚动条需要另外在TD内添加一个容器如:DIV。 例子： <table style="width: 450px; height: 360px"> <tr> <td valign="top" style="border:solid 1px gray"><d...
如何手写一个滚动条
最新发布
feng4175的博客
01-09 543
这里就是联动滑块滚动时，滚动元素对应翻滚，获取鼠标按下时的位置，当鼠标进行拖拽时，计算拖拽的距离，这个距离通过比列换算成滚动元素需要滚动的距离，在设置其scroolTop的值，就可以了。这里的H就是监听滚动元素内，滚动的距离通过与滑块的比列进行转换之后获得的滑块实际需要下移的vh高度值。这里是获取滚动元素里的子元素高度减去滚动元素的高度，也就是实际的滚动区域，这个值就是实际滚动的高度PX值，接下来通过px转换为vh。1、首先通过滚动元素的滚动高度，联动我们手写的滚动条滑块上移或者下滑。
手写滚动条（仅完成鼠标滚动事件，不包含拖动滚动的功能）
qq_45353152的博客
12-12 307
最近看到别人项目中的导航栏和页面内容的滚动分离，单独生效的滚动条，正好最近不忙就研究了一下，实现的方法比较LOW（简单粗暴），就是监听鼠标位置，计算是非在允许滚动的范围，在执行计算，根据滚动的上下，就算出相应的比例，给要滚动的内容价格top属性的值。 直接提供一段可以直接运行的代码，实现方法。实际应用需要自己修改样式，这个的动画效果都没做，最好是滚动时滚动条显示 停止滚动滚动条消失，也能不让别人发现这个滚动条不能托转， 需要添加拖拽事件也很简单，方法例有监听鼠标的方法，就是需要自己计算位置重新赋值。
js手写一个自己的滚动条
HamsterKnight的博客
08-12 1825
1.滚动条出现的原因是元素里面的内容超出元素本身的大小 元素的所有子元素的高度和= 元素滚动条可滚动的距离 + 元素可见大小 2.通过元素获取到元素内部子元素的高度和和元素可见高度，可求得元素滚动条可滚动的距离 3.通过监听元素的scroll事件获取元素滚动条的滚动距离，求得当前滚动距离占可滚动位置的百分比 当前滚动条滚动的距离 / 元素可滚动的距离 4.（再用元素可见高度 乘 滚...
js控制滚动条（简单插件手写）
luzhongk的博客
05-07 1750
<head> <meta charset="UTF-8"> <title></title> <style> body { height: 5000px; } input{position:fixed;top:100px;} </style> </head> <body> <input id
手写滚动条，以及dataTables表格插件下的手写滚动条
汤一飞
08-31 1355
单纯的手写滚动条 这里调试过，没问题，可以直接复制了浏览器调试查看效果 大致思路：设置包裹内容div的容器div的overflow-y为hidden；调整内容div的top来滚动显示内容div的不同位置内容。检测鼠标滚动事件，设置容器div的max-height来设定每次最多显示多少px的内容，设置每次滚动滚多少px，也可通过拖动手写滚动条来快速访问； 手写的滚动条是容器div的
原生js手写滚动条（完整代码）
热门推荐
前端-阿来
08-22 4万+
首先说一下手写滚动条的好处： 能够自己设置样式（系统自带太过难看） 代码核心结构： 可以知道conten向上卷曲出去的距离与bar的top距离是成比例的 下面我们直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v...
使用jQuery实现表格单元格拖动选择
此外，CSS类如`.div-right`用于文本右对齐，`.div-unSelect`和`.div-Select`则分别用于未选中和已选中的单元格背景色，增强了用户体验。整个实例的目的是创建一个功能齐全、易于操作的表格选择工具，这对于需要处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值