• Html


     原文地址,转载请注明出处:http://www.cnblogs.com/jying/p/6294063.html

    做项目的时候发现给 tbody设置 height 和 overflow-y 在IE下不起作用,或者变为每行高度为height的高度了,经查找资料学习,可加入position:absolute 控制(则其父元素需加position:relative)。

    相关学习链接:http://jsfiddle.net/nyCKE/272/

     一个实例:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <div style="100%;">
            <table style="table-layout:fixed;100%;height:182px;position:relative;">
                <thead style="display:table;100%;height:32px;background-color:#F9FAFB;">
                    <tr>
                        <th style="20%;">
                            <div>
                                标题1
                            </div>
                        </th>
                        <th style="20%;">
                            <a href="javascript:void(0)" >
                                标题2
                            </a>
                        </th>
                        <th style="20%;">
                            <a href="javascript:void(0)">
                                标题3
                            </a>
                        </th>
                        <th style="20%;">
                            <a href="javascript:void(0)">
                                标题4
                            </a>
                        </th>
                        <th style="20%;">
                            <a href="javascript:void(0)">
                                标题5
                            </a>
                        </th>
                    </tr>
                </thead>
                <tbody style="height:150px;100%;overflow-y:auto;display:block;position:absolute;text-align: center;">
                    <tr style="100%;display: table;" >
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                    </tr>
                    <tr style="100%;display: table;" >
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                    </tr>
                    <tr style="100%;display: table;" >
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                    </tr>
                    <tr style="100%;display: table;" >
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                    </tr>
                    <tr style="100%;display: table;" >
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                    </tr>
                    <tr style="100%;display: table;" >
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                    </tr>
                    <tr style="100%;display: table;" >
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                    </tr>
                    <tr style="100%;display: table;" >
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                    </tr>
                    <tr style="100%;display: table;" >
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                    </tr>
                    <tr style="100%;display: table;" >
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                    </tr>
                    <tr style="100%;display: table;" >
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                    </tr>
                    <tr style="100%;display: table;" >
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                        <td style="20%;">1</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    </html>

     效果如下:

  • 相关阅读:
    NSIS实现ArcEngine Runtime安装和自动注册
    .Net平台下开发中文语音应用程序(转载)
    NSIS:判断并安装.NET Framework的例子(转载)
    教你如何将IPHONE恢复正常(转载)
    C# SendMessage WPARAM大全 (收集)
    关于开发WPF的一些感想
    C#版本的CPU性能测试
    ITTC数据挖掘平台介绍(二) 微博数据挖掘和分析
    [XMOVE自主设计的体感方案] XMove 4.0 无线组网协议
    [XMOVE自主设计的体感方案] XMove 4.0节点介绍——抽象节点和硬件
  • 原文地址:https://www.cnblogs.com/jying/p/6294063.html
Copyright © 2020-2023  润新知