div 添加滚动条

标签: div | 发表时间:2013-03-12 11:45 | 作者:kaifa123
出处:http://blog.csdn.net

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 onclick="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 发表于2013-3-12 11:45:00 原文链接
阅读:0 评论:0 查看评论

相关 [div] 推荐:

div 添加滚动条

- - CSDN博客推荐文章
style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis" //让所有的table td都展开. overflow-y: hidden; overflow-x: scroll; width: 987px  //设置竖着没有滚动条,横着有滚动条 ,一定要设置宽度.

div在页面中的高

- - Web前端 - ITeye博客
这里是javascript中制作滚动代码的常用属性. 页可见区域宽: document.body.clientWidth;. 网页可见区域高: document.body.clientHeight;. 网页可见区域宽: document.body.offsetWidth   (包括边线的宽);. 网页可见区域高: document.body.offsetHeight (包括边线的宽);.

jQuery拖拽div实现

- - CSDN博客Web前端推荐文章
思路是利用jquery的mousemove,mousedown,mouseup三个事件,定义两个相对位置,分别是. 1、组件左上角与屏幕左上角的相对位置. 2、鼠标所在坐标与组件左上角的相对位置. $(document).ready(function(){ var move=false;//移动标记 var _x,_y;//鼠标离控件左上角的相对位置.

HTML标签p和div的不同

- - CSDN博客Web前端推荐文章
标题:HTML标签p和div的不同. 原文:What is the difference between

and

?. 链接: http://stackoverflow.com/questions/2226562/what-is-the-difference-between-p-and-div.

css 控制div高度自适应浏览器的高度

- - 博客园_首页
css 控制div高度自适应浏览器的高度. 20 这里是内容容这里是内容. 25 这里是内容这里是内容. 35 这里是内容这里是内容. 43 这里是内容这里是内容. 48 这里是内容这里是内容. 55 这里是内容容这里是内容. 57 这里是内容这里是内容. 64 这里是内容容这里是内容.

幾個div+css 面試題,轉來大家一起來看看!

- - wowbox blog (網頁設計知識庫)
1、超鏈接訪問過後hover樣式就不出現的問題. 被點擊訪問過的超鏈接樣式不在具有hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A. 2、IE6的雙倍邊距BUG. 浮動後本來外邊距10px,但IE解釋為20px,解決辦法是加上display:inline. 3、為什麼FF下文本無法撐開容器的高度.

用JS将页面定位到某个位置(DIV)

- - JavaScript - Web前端 - ITeye博客
昨天一个朋友问我如何在页面加载完成后,自动将页面定位到某个位置,当时有些忙,就没来得及解决. 殊不知今天在做PHP教程的项目中也有了同样的需求:为了页面美观,需要只显示用户从楼盘相册点击后进入的相册幻灯页面的楼盘信息(也就是自动定位到了楼盘的相关信息,忽略了顶部banner). 使用Javascript自动将页面滚动到指定位置.

DIV+CSS解决IE6,IE7,IE8,FF兼容问题

- - Web前端 - ITeye博客
1.ie8下兼容问题,这个最好处理,转化成ie7兼容就可以. 在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了. 2.flaot浮动造成IE6下面双倍边距问题,这个最常见,也最好处理,!important解决,比如. margin-left:10px !important;/*IE7,IE8,FF下是10PX*/;.

为什么不能在 EDM 模版中使用 DIV ?

- - 知乎每日精选
不推荐使用 div 的原因是很多邮件客户端对 div 布局的支持不好,特别是在用于多栏布局的情况下. 参见常见邮件客户端对 div CSS 属性的支持:. 以上图表来自这篇关于邮件中 div 使用的文章:[1]. 从图表中的信息可以看出,就像文章中提到的那样,「完全不能使用 div」是一个误解,即使它在大多数情况下是保险的做法.

三种Div高度自适应的方法

- - CSDN博客Web前端推荐文章
让DIV高度自适应,这是在网页设计中常遇到的问题,为了给大家提供参考,这里提供3种div高度自适应的方法:一是JS法、二是背景图填充法、三是“补丁大法”(比较变态). 原理:用JS判断左右DIV的高度,若不一致则设为一致. 这是大站用得比较多的方法,如163等,研究了一下,结果如下. 这里是给父DIV设置了背景图片填充,所有DIV都不设高度.