div 添加滚动条 - html/css语言栏目：html.css - 自学-自学php网

主页 > 前端 > css教程 >

div 添加滚动条 - html/css语言栏目：html.css - 自学

来源：自学PHP网时间：2015-04-14 14:50 作者：阅读:次

[导读] style=overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis //让所有的table td都展开overflow-y: hidden; overflow-x: scroll; width: 987px //设置竖着没有滚动条......

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://up.2cto.com/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://up.2cto.com/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://up.2cto.com/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://up.2cto.com/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>

ecshop商品页商品属性分类选择的制作教程 - html

国外酷站：20个简约风格的电子商务网站设计案例

最新评论

加载更多~~

添加评论

更多文章推荐

CSS实现宽高成比例缩放 - html/css语言栏目：html. 2015-04-14
5°专场视觉设计小析网页专场设计的一些方法 2015-04-14
在线营销终极指南：响应网页设计 - html/css语言栏 2015-04-14
纯HTML+CSS3制作导航菜单(附源码)_css3_CSS_网页制作 2014-12-15
查找字符串中出现最多的字符和个数(两种方法一 2015-04-14
网页设计发展遇阻克服三大难题 - html/css语言栏 2015-04-14
具有引导性的移动应用界面设计模式 - html/css语言 2015-04-14
如何创建一个CSS3 Ajax加载图标没有图像 - html/cs 2015-04-14
学习笔记：排列组合 - html/css语言栏目：html.css 2015-04-14
纯CSS3实现给头像加个光芒四射且旋转的背景动画 2014-12-15

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com



添加评论