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

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>