div层给table加滚动条

最新推荐文章于 2023-05-29 14:44:37 发布
最新推荐文章于 2023-05-29 14:44:37 发布
阅读量1.1k 收藏 1
点赞数
文章标签： javascript python ViewUI
原文链接：https://my.oschina.net/u/922487/blog/149141
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis" //让所有的table td都展开
 
overflow-y: hidden; overflow-x: scroll; width: 987px  //设置竖着没有滚动条，横着有滚动条 ，一定要设置宽度
例子：
<div style="overflow-y: hidden; overflow-x: scroll; width: 987px">
        <table class="report-list" style="width: 970px" cellspacing="0" cellpadding="0" align="center" border="2" bind="on">
            <tbody>
                <tr>
                    <td class="itemClick1" align="center" width="30">
                        序号
                    </td>
                    <td class="itemClick1-5" align="center" width="100" req="SORT,创建日期" con="CLICK">
                        创建日期
                    </td>
                    <td class="itemClick1-5" align="center" width="100" req="SORT,质量问题名称" con="CLICK">
                        质量问题名称
                    </td>
                    <td class="itemClick1-5" align="center" width="100" req="SORT,最终产品名称" con="CLICK">
                        最终产品名称
                    </td>
                    <td class="itemClick1-5" align="center" width="100" req="SORT,工作状态" con="CLICK">
                        工作状态
                    </td>
                    <td class="itemClick1-5" align="center" width="100" req="SORT,一层原因" con="CLICK">
                        一层原因
                    </td>
                    <td class="itemClick1-5" align="center" width="100" req="SORT,技术归零" con="CLICK">
                        技术归零
                    </td>
                    <td class="itemClick1-5" align="center" width="100" req="SORT,管理归零" con="CLICK">
                        管理归零
                    </td>
                    <td class="itemClick1-5" align="center" width="40" req="SORT,原件查看" con="CLICK">
                        原件查看
                    </td>
                    <td class="itemClick1-5" style="width: 40px; text-align: center">
                        <div style="overflow: hidden; width: 40px; white-space: nowrap; text-overflow: ellipsis">
                            删除</div>
                    </td>
                    <td class="itemClick1-5" style="width: 40px; text-align: center">
                        <div style="overflow: hidden; width: 40px; white-space: nowrap; text-overflow: ellipsis">
                            修改</div>
                    </td>
                    <td class="itemClick1-5" style="border-bottom-color: #79d8f0; width: 60px; text-align: center">
                        <div style="overflow: hidden; width: 60px; white-space: nowrap; text-overflow: ellipsis">
                            工作流</div>
                    </td>
                    <td>
                        备注
                    </td>
                    <td>
                        多数
                    </td>
                </tr>
                <tr class="reportTR" req="REPORT,b0cfeedbe63c48a99d3b324acc5bb619,02,a2f004335b1c4a4398706ce32b5aca6f,4,admin,,,," con="CLICK">
                    <td class="item1" align="center">
                        <div class="overflow1" title="1">
                            1</div>
                    </td>
                    <td class="item1-6" align="center" width="100">
                        <div title="2013-01-30 14:05:12" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">
                            2013-01-30 14:05:12</div>
                    </td>
                    <td class="item1-6" align="center" width="100">
                        <div title="mclk" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">
                            mclk</div>
                    </td>
                    <td class="item1-6" align="center" width="100">
                        <div title="最终产品名称" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">
                            最终产品名称</div>
                    </td>
                    <td class="item1-6" align="center" width="100">
                        <div title="总装测试" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">
                            总装测试</div>
                    </td>
                    <td class="item1-6" align="center" width="100">
                        <div title="软件" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">
                            软件</div>
                    </td>
                    <td class="item1-6" align="center" width="100">
                        <div title="是" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">
                            是</div>
                    </td>
                    <td class="item1-6" align="center" width="100">
                        <div title="是" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">
                            是</div>
                    </td>
                    <td class="item1-6" align="center" width="40">
                        <div style="overflow: hidden; width: 40px; white-space: nowrap; text-overflow: ellipsis">
                            <div>
                            </div>
                        </div>
                    </td>
                    <td class="item11" style="width: 40px">
                        <div style="overflow: hidden; width: 40px; white-space: nowrap; text-overflow: ellipsis">
                            <img alt="删除" src=http://www.2cto.com/uploadfile/2013/0312/20130312025239307.png" border="0" req="DEL,b0cfeedbe63c48a99d3b324acc5bb619," con="UPDATE" /></div>
                    </td>
                    <td class="item11" style="width: 40px; text-align: center">
                        <div style="overflow: hidden; width: 40px; white-space: nowrap; text-overflow: ellipsis">
                        </div>
                    </td>
                    <td class="workflow-status workflow-status-4" style="border-bottom-color: #79d8f0; width: 60px; text-align: center">
                        <div style="overflow: hidden; width: 60px; white-space: nowrap; text-overflow: ellipsis">
                            待修改</div>
                    </td>
                    <td>
                        <div style="overflow: hidden; width: 60px; white-space: nowrap; text-overflow: ellipsis">
                            备注数据</div>
                    </td>
                    <td>
                        sdddddddddddddd
                    </td>
                </tr>
                <tr class="reportTR" req="REPORT,cd0c2c1ece774dadbb8e734db874d5e7,02,a2f004335b1c4a4398706ce32b5aca6f,4,admin,,,," con="CLICK">
                    <td class="item1" align="center">
                        <div class="overflow1" title="2">
                            2</div>
                    </td>
                    <td class="item1-6" align="center" width="100">
                        <div title="2013-01-22 12:23:03" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">
                            2013-01-22 12:23:03</div>
                    </td>
                    <td class="item1-6" align="center" width="100">
                        <div title="质量问题名称" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">
                            质量问题名称</div>
                    </td>
                    <td class="item1-6" align="center" width="100">
                        <div title="234234" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">
                            234234</div>
                    </td>
                    <td class="item1-6" align="center" width="100">
                        <div title="研制阶段" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">
                            研制阶段</div>
                    </td>
                    <td class="item1-6" align="center" width="100">
                        <div title="器材" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">
                            器材</div>
                    </td>
                    <td class="item1-6" align="center" width="100">
                        <div title="是" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">
                            是</div>
                    </td>
                    <td class="item1-6" align="center" width="100">
                        <div title="是" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">
                            是</div>
                    </td>
                    <td class="item1-6" align="center" width="40">
                        <div style="overflow: hidden; width: 40px; white-space: nowrap; text-overflow: ellipsis">
                            <div>
                            </div>
                        </div>
                    </td>
                    <td class="item11" style="width: 40px">
                        <div style="overflow: hidden; width: 40px; white-space: nowrap; text-overflow: ellipsis">
                            <img alt="删除" src=http://www.2cto.com/uploadfile/2013/0312/20130312025239307.png" border="0" req="DEL,cd0c2c1ece774dadbb8e734db874d5e7,"  con="UPDATE" /></div>
                    </td>
                    <td class="item11" style="width: 40px; text-align: center">
                        <div style="overflow: hidden; width: 40px; white-space: nowrap; text-overflow: ellipsis">
                        </div>
                    </td>
                    <td class="workflow-status workflow-status-4" style="border-bottom-color: #79d8f0; width: 60px; text-align: center">
                        <div style="overflow: hidden; width: 60px; white-space: nowrap; text-overflow: ellipsis">
                            待修改</div>
                    </td>
                    <td>
                        备注数据
                    </td>
                    <td>
                        sssssdfsdfsdfsdfsdf
                    </td>
                </tr>
                <tr class="reportTR" req="REPORT,7bfd927584094ba48e29010162b76fcb,02,a2f004335b1c4a4398706ce32b5aca6f,4,admin,,,," con="CLICK">
                    <td class="item1" align="center">
                        <div class="overflow1" title="3">
                            3</div>
                    </td>
                    <td class="item1-6" align="center" width="100">
                        <div title="2013-01-14 11:41:38" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">
                            2013-01-14 11:41:38</div>
                    </td>
                    <td class="item1-6" align="center" width="100">
                        <div title="问题" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">
                            问题</div>
                    </td>
                    <td class="item1-6" align="center" width="100">
                        <div title="名称" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">
                            名称</div>
                    </td>
                    <td class="item1-6" align="center" width="100">
                        <div title="发射场测试" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">
                            发射场测试</div>
                    </td>
                    <td class="item1-6" align="center" width="100">
                        <div title="工艺" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">
                            工艺</div>
                    </td>
                    <td class="item1-6" align="center" width="100">
                        <div title="是" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">
                            是</div>
                    </td>
                    <td class="item1-6" align="center" width="100">
                        <div title="是" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">
                            是</div>
                    </td>
                    <td class="item1-6" align="center" width="40">
                        <div style="overflow: hidden; width: 40px; white-space: nowrap; text-overflow: ellipsis">
                            <div>
                                <a onclick="KeyUpM(1,'VIEW','METE','7bfd927584094ba48e29010162b76fcb')" href="http://localhost:6404/IcelineIar/secure/report/fullQuarterlyList.aspx?TYPE=02#">
                                    <img alt="查看原件" src=http://www.2cto.com/uploadfile/2013/0312/20130312025239327.png" border="0" /></a></div>
                        </div>
                    </td>
                    <td class="item11" style="width: 40px">
                        <div style="overflow: hidden; width: 40px; white-space: nowrap; text-overflow: ellipsis">
                            <img alt="删除" src=http://www.2cto.com/uploadfile/2013/0312/20130312025239307.png" border="0" req="DEL,7bfd927584094ba48e29010162b76fcb," con="UPDATE" /></div>
                    </td>
                    <td class="item11" style="width: 40px; text-align: center">
                        <div style="overflow: hidden; width: 40px; white-space: nowrap; text-overflow: ellipsis">
                        </div>
                    </td>
                    <td class="workflow-status workflow-status-4" style="border-bottom-color: #79d8f0;
                        width: 60px; text-align: center">
                        <div style="overflow: hidden; width: 60px; white-space: nowrap; text-overflow: ellipsis">
                            待修改</div>
                    </td>
                    <td>
                        备注数据
                    </td > www.2cto.com
                    <td>
                        eeeeeeeeeeeeeeeeeeeeeeeeeeee
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

转载于:https://my.oschina.net/u/922487/blog/149141

??yy
关注
纯css实现table滚动条(纯css实现div滚动条)
04-23
纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.
layui 实现table翻页滚动条位置保持不变的例子
10-16
5. 最后，在数据加载完成后，我们需要将之前保存的滚动条位置恢复到`layui-table-main` div 上。 ```javascript if (layuitable != null && layuitable.length > 0) { layuitable[0].scrollTop = scrollTop; } ```...
DIV 嵌套TABlE 设置滚动条
王永胜的专栏
03-02 1026
DIV 嵌套TABlE 设置滚动条，显示滚动条
div table 水平滚动条
redzy的博客
11-18 376
&lt;div style="overflow:auto; width:600px; height:530px;border:1px solid #777"&gt; &lt;table width="5000" border="0" cellspacing="0" cellpadding="0"&gt;&lt;/table&gt;&lt;/div&amp
Table显示滚动条
weixin_30906701的博客
03-22 205
Table显示滚动条，要先把table放到一个div中，div的长度和宽度要固定，控制overflow属性为scroll <divstyle="width:700px;height:225px;overflow:scroll;"> ...</div> table的长度和宽度也要固定哦 <tablecellspacing="0"wid...
html table scroll
qq 117791303
07-27 803
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <table border="1"> <tbody> <tr> <td>http://127.0.0.1:8080/PrjJsp/Test/Ne.
给DIV添加滚动条的实现代码
09-25
DIV 滚动条实现代码详解 在 HTML 中，我们经常需要为 DIV 添加滚动条，以便在页面空间有限的情况下显示大量内容。今天，我们将探讨如何为 DIV 添加滚动条，并了解相关的 CSS 属性和值。 基本实现 要为 DIV 添加...
解决layui数据表格table的横向滚动条显示问题
12-11
ps：这个问题fly社区给出的解释是：table 列宽自适应出现横向滚动条的几率一般是比较小的，主要原因是 table 的渲染有时会在浏览器纵向滚动条出现之前渲染完毕，这时 table 容器会被强制减少滚动条宽度的差（一般是 ...
Table在DIV中以滚动条方式显示
weixin_34381687的博客
06-23 1108
2019独角兽企业重金招聘Python工程师标准>>> ...
表格循环滚动（自己记录一下）
qq_40004867的博客
05-29 247
【代码】表格循环滚动（自己记录一下）
HTML循环创建div和table并实现滚动效果
小橘是橘子的博客
10-31 4752
HTML循环创建div与解决ajax多次请求重复创建div
给table添加横向或者纵向滚动条
zhaoyifei01的博客
04-17 5119
要给table添加滚动条其实很简单，主要是给table放到一个div里去，然后再设置div显示滚动条即可。
HTML页面table滚动条的实现
热门推荐
好久不见的流星
05-08 2万+
有很多页面由于数据量过大，会产生横纵滚动条。为了便于使用者观看，我们要把表头固定一下。根据这个需求写了个demo来实现这个功能。
为table添加滚动条
u011109356的专栏
05-17 6060
在table外加个div，然后再设置div和table的高度。最后，再给div加个overflow：scroll(横向滚动条为overflow-x:scroll；竖向滚动条为overflow-y:scroll)。 预约人 预约日期 预约时间 下车地点 .tableDiv{ he
HTML如何给table添加滚动条
lchina1314的专栏
04-08 4138
要给table添加滚动条其实很简单，主要是给table放到一个div里去，然后再设置div显示滚动条即可。示例代码如下所示： &lt;!--div比table大小要小才会显示--&gt; &lt;div style="overflow-x: auto; overflow-y: auto; height: 100px; width:200px;"&gt; &lt;table i...
html中table设置滚动条
qq_42256836的博客
11-04 2万+
主要是给table放到一个div里去，然后再设置div显示滚动条 &lt;!--div比table大小要小才会显示--&gt; &lt;div style="overflow-x: auto; overflow-y: auto; height: 100px; width:200px;"&gt; &lt;table id="table" border="1" align="center&qu
layui table 滚动条加宽
最新发布
06-25
在使用过程中，如果想要为layui table的滚动条添加宽度，可以考虑以下几个步骤： 1. 默认情况下，layui table的滚动条宽度可能不会自动调整到适应容器的宽度，特别是当表格内容超出父元素时。 2. 如果你希望滚动条...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值