div 添加滚动条

最新推荐文章于 2024-04-18 14:02:33 发布
最新推荐文章于 2024-04-18 14:02:33 发布
阅读量1.1k 收藏
点赞数
分类专栏： 杂谈
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kaifa123/article/details/8662925
版权

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://localhost:6404/IcelineIar/images/batu.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://localhost:6404/IcelineIar/images/batu.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 οnclick="KeyUpM(1,'VIEW','METE','7bfd927584094ba48e29010162b76fcb')" href="http://localhost:6404/IcelineIar/secure/report/fullQuarterlyList.aspx?TYPE=02#">
                                    <img alt="查看原件" src="http://localhost:6404/IcelineIar/images/icon_biao.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://localhost:6404/IcelineIar/images/batu.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>
                    <td>
                        eeeeeeeeeeeeeeeeeeeeeeeeeeee
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

kaifa123
关注
专栏目录
使用图片制作网页滚动条
realromi的专栏
08-20 1081
以前我们也介绍过使用CSS自定义IE的滚动条效果，如果想替换成使用图片制作滚动条，又该如何操作？这里参照一下预览页面，简单介绍一下制作的方法：　　1、以Iframe制作页面，主页930.htm，Iframe页面930_demo.htm，930.htm中引入子页：scrolling=no height=250>　　注意需要将页面默认的滚动条关闭：scrolling=no　　2、建立930_demo.
给DIV添加滚动条的实现代码
09-25
今天，我们将探讨如何为 DIV 添加滚动条，并了解相关的 CSS 属性和值。 基本实现 要为 DIV 添加滚动条，只需要在 DIV 元素中添加 `overflow` 属性，并将其值设置为 `auto`。例如： ``` <div style="position:...
给大图片添加滚动条
07-20
给大图片添加滚动条
css div添加滚动条（附加源码）
最新发布
xiaohua616的博客
04-18 452
css div添加滚动条（附加源码）
div包裹相同高度的image出现滚动条
qq_51389137的博客
05-19 314
id为box的div盒子与子元素img的高度相同但是会出现滚动条，margin padding等等都为0.间隙到底哪里来的，应该是img有类似文本一样的属性，在box上加入css代font-size:0就可以了。或者overflow直接设置为hidden。
使div或img在滚动条滚动时，始终居中在屏幕中间
Love_云宝儿的博客
09-28 2756
直接上代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="format-detection" content="telphone=no, email=no"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,
为div添加滚动条.html
04-16
为div添加滚动条 html 欢迎下载
给div加滚动条 div显示滚动条设置代码
09-25
要给div添加滚动条，主要有以下几种方法： 1. 直接设置overflow属性为auto或scroll。当内容超出div设定的高度和宽度时，浏览器会自动为div添加滚动条。代码示例如下： ```html <div style="overflow: auto; width...
css 给div添加滚动并隐藏滚动条
12-28
css 给div添加滚动并隐藏滚动条 ，具体代码如下所示:  在html中 <div class=box> <div>下面内容会单独滚动</div> <div class=scroll> <div class=content> <p>1111111111111111 <p>222222222222222 <p>...
从零开始学_JavaScript_系列（23）——css<5>滚动条，Tab，spellcheck，img放置
weixin_33858336的博客
06-03 126
（21）滚动条的美化 for chrome内核： /* 有这行才有效，滚动条的宽度 */ ::-webkit-scrollbar { width: 12px; } /* 滚动条的背景 */ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 06px rgba(0,0,0,0...
css怎么设置div滚动条
coldriversnow的专栏
08-29 3955
经过以上对滚动条的设置，我们可以根据实际需求选择相应的样式进行设置，这样可以更好地体验到网页及移动端应用的交互体验。同时需要注意的是，以上示例主要适用于 Chrome 和 Safari 等一些 Webkit 内核的浏览器，如果要适配其他浏览器，需要使用不同的样式和属性。随着网页及移动端应用的发展，滚动条成为了一种不可或缺的用户体验，而 CSS3 提供的一系列滚动条样式设置使得我们可以更加灵活地定制滚动条的样式，今天我们就来一起探讨一下如何利用CSS来设置div滚动条。
背景图片太大时，而又不出现竖向滚动条的做法
sunny327的专栏
12-04 6175
当设计图做为背景图片太大时，必会出现滚动条，但是项目那边不希望出现滚动条，是一屏显示的，那就可以这样设计Css img{ display:block; width:100%; height:100%;} 这样就可以让图片在页面中平铺，而不产生滚动条，但是有一个问题，当显示器的尺寸很小或13寸显示器的时候，图片会严重变形，但是这是目前来说最好的解决方案了。又不出现滚动条。做适配时也可
富文本编辑的图片在手机，移动端显示图片img太大，超出屏幕，出现滚动条，富文本中的图片如何修改样式
cd13849109771的博客
10-25 1429
富文本编辑的图片在手机，移动端显示图片太大，超出屏幕，出现滚动条，富文本中的图片如何修改样式 var html = res.data.details.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1') .replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1') .replace(/<img([\s\w"-=\/\.:;]
img 图片滚动展示
weixin_34146805的博客
01-11 568
参考资料： 1）http://www.bxslider.com/ 2）jquery特效 http://www.webresourcesdepot.com/attractive-image-hover-effects-with-jquery-adipoli/
CSS——水平(横向滚动条)
热门推荐
spfLinux的博客
11-05 3万+
Document ul { width: 200px; height: 100px; overflow-x: scroll; overflow-y: hidden; white-space:nowrap; /* ul中的内容不换行 */ } ul li { display: inline-block; }
让一个图片随页面垂直滚动条滚动位置不变
王建野的专栏
03-13 4536
让一个图片随页面垂直滚动条滚动位置不变 function $(id) { return document.getElementById(id); } window.onload = function () { var img1 = $("img1");
js在以div添加滚动条
06-07
在JavaScript中，可以通过设置CSS样式来为一个div元素添加滚动条。具体方法如下： 1. 首先，获取需要添加滚动条的div元素，可以使用document.querySelector()或document.getElementById()等方法获取。 2. 然后，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值