您现在的位置:首页 >> 前端 >> 内容

div 添加滚动条

时间:2013/3/12 14:51:12 点击:

  核心提示:style=overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis //让所有的table td都展开...
style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis" //让所有的table td都展开

 

overflow-y: hidden; overflow-x: scroll; width: 987px  //设置竖着没有滚动条,横着有滚动条 ,一定要设置宽度

例子:

<p 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">

                        <p style="overflow: hidden; width: 40px; white-space: nowrap; text-overflow: ellipsis">

                            删除</p>

                    </td>

                    <td class="itemClick1-5" style="width: 40px; text-align: center">

                        <p style="overflow: hidden; width: 40px; white-space: nowrap; text-overflow: ellipsis">

                            修改</p>

                    </td>

                    <td class="itemClick1-5" style="border-bottom-color: #79d8f0; width: 60px; text-align: center">

                        <p style="overflow: hidden; width: 60px; white-space: nowrap; text-overflow: ellipsis">

                            工作流</p>

                    </td>

                    <td>

                        备注

                    </td>

                    <td>

                        多数

                    </td>

                </tr>

                <tr class="reportTR" req="REPORT,b0cfeedbe63c48a99d3b324acc5bb619,02,a2f004335b1c4a4398706ce32b5aca6f,4,admin,,,," con="CLICK">

                    <td class="item1" align="center">

                        <p class="overflow1" title="1">

                            1</p>

                    </td>

                    <td class="item1-6" align="center" width="100">

                        <p title="2013-01-30 14:05:12" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">

                            2013-01-30 14:05:12</p>

                    </td>

                    <td class="item1-6" align="center" width="100">

                        <p title="mclk" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">

                            mclk</p>

                    </td>

                    <td class="item1-6" align="center" width="100">

                        <p title="最终产品名称" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">

                            最终产品名称</p>

                    </td>

                    <td class="item1-6" align="center" width="100">

                        <p title="总装测试" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">

                            总装测试</p>

                    </td>

                    <td class="item1-6" align="center" width="100">

                        <p title="软件" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">

                            软件</p>

                    </td>

                    <td class="item1-6" align="center" width="100">

                        <p title="是" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">

                            是</p>

                    </td>

                    <td class="item1-6" align="center" width="100">

                        <p title="是" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">

                            是</p>

                    </td>

                    <td class="item1-6" align="center" width="40">

                        <p style="overflow: hidden; width: 40px; white-space: nowrap; text-overflow: ellipsis">

                            <p>

                            </p>

                        </p>

                    </td>

                    <td class="item11" style="width: 40px">

                        <p 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" /></p>

                    </td>

                    <td class="item11" style="width: 40px; text-align: center">

                        <p style="overflow: hidden; width: 40px; white-space: nowrap; text-overflow: ellipsis">

                        </p>

                    </td>

                    <td class="workflow-status workflow-status-4" style="border-bottom-color: #79d8f0; width: 60px; text-align: center">

                        <p style="overflow: hidden; width: 60px; white-space: nowrap; text-overflow: ellipsis">

                            待修改</p>

                    </td>

                    <td>

                        <p style="overflow: hidden; width: 60px; white-space: nowrap; text-overflow: ellipsis">

                            备注数据</p>

                    </td>

                    <td>

                        sdddddddddddddd

                    </td>

                </tr>

                <tr class="reportTR" req="REPORT,cd0c2c1ece774dadbb8e734db874d5e7,02,a2f004335b1c4a4398706ce32b5aca6f,4,admin,,,," con="CLICK">

                    <td class="item1" align="center">

                        <p class="overflow1" title="2">

                            2</p>

                    </td>

                    <td class="item1-6" align="center" width="100">

                        <p title="2013-01-22 12:23:03" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">

                            2013-01-22 12:23:03</p>

                    </td>

                    <td class="item1-6" align="center" width="100">

                        <p title="质量问题名称" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">

                            质量问题名称</p>

                    </td>

                    <td class="item1-6" align="center" width="100">

                        <p title="234234" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">

                            234234</p>

                    </td>

                    <td class="item1-6" align="center" width="100">

                        <p title="研制阶段" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">

                            研制阶段</p>

                    </td>

                    <td class="item1-6" align="center" width="100">

                        <p title="器材" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">

                            器材</p>

                    </td>

                    <td class="item1-6" align="center" width="100">

                        <p title="是" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">

                            是</p>

                    </td>

                    <td class="item1-6" align="center" width="100">

                        <p title="是" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">

                            是</p>

                    </td>

                    <td class="item1-6" align="center" width="40">

                        <p style="overflow: hidden; width: 40px; white-space: nowrap; text-overflow: ellipsis">

                            <p>

                            </p>

                        </p>

                    </td>

                    <td class="item11" style="width: 40px">

                        <p 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" /></p>

                    </td>

                    <td class="item11" style="width: 40px; text-align: center">

                        <p style="overflow: hidden; width: 40px; white-space: nowrap; text-overflow: ellipsis">

                        </p>

                    </td>

                    <td class="workflow-status workflow-status-4" style="border-bottom-color: #79d8f0; width: 60px; text-align: center">

                        <p style="overflow: hidden; width: 60px; white-space: nowrap; text-overflow: ellipsis">

                            待修改</p>

                    </td>

                    <td>

                        备注数据

                    </td>

                    <td>

                        sssssdfsdfsdfsdfsdf

                    </td>

                </tr>

                <tr class="reportTR" req="REPORT,7bfd927584094ba48e29010162b76fcb,02,a2f004335b1c4a4398706ce32b5aca6f,4,admin,,,," con="CLICK">

                    <td class="item1" align="center">

                        <p class="overflow1" title="3">

                            3</p>

                    </td>

                    <td class="item1-6" align="center" width="100">

                        <p title="2013-01-14 11:41:38" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">

                            2013-01-14 11:41:38</p>

                    </td>

                    <td class="item1-6" align="center" width="100">

                        <p title="问题" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">

                            问题</p>

                    </td>

                    <td class="item1-6" align="center" width="100">

                        <p title="名称" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">

                            名称</p>

                    </td>

                    <td class="item1-6" align="center" width="100">

                        <p title="发射场测试" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">

                            发射场测试</p>

                    </td>

                    <td class="item1-6" align="center" width="100">

                        <p title="工艺" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">

                            工艺</p>

                    </td>

                    <td class="item1-6" align="center" width="100">

                        <p title="是" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">

                            是</p>

                    </td>

                    <td class="item1-6" align="center" width="100">

                        <p title="是" style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis">

                            是</p>

                    </td>

                    <td class="item1-6" align="center" width="40">

                        <p style="overflow: hidden; width: 40px; white-space: nowrap; text-overflow: ellipsis">

                            <p>

                                <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></p>

                        </p>

                    </td>

                    <td class="item11" style="width: 40px">

                        <p 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" /></p>

                    </td>

                    <td class="item11" style="width: 40px; text-align: center">

                        <p style="overflow: hidden; width: 40px; white-space: nowrap; text-overflow: ellipsis">

                        </p>

                    </td>

                    <td class="workflow-status workflow-status-4" style="border-bottom-color: #79d8f0;

                        width: 60px; text-align: center">

                        <p style="overflow: hidden; width: 60px; white-space: nowrap; text-overflow: ellipsis">

                            待修改</p>

                    </td>

                    <td>

                        备注数据

                    </td > www.2cto.com

                    <td>

                        eeeeeeeeeeeeeeeeeeeeeeeeeeee

                    </td>

                </tr>

            </tbody>

        </table>

    </p>

Tags:DI IV V添 添加 
作者:网络 来源:不详