• 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>

     效果如下:

  • 相关阅读:
    12月14日 bs-grid , destroy_all()
    12月13日 什么是help_method,session的简单理解, find_by等finder method
    12月10日 render( locals:{...}) 传入本地变量。
    12月8日 周五 image_tag.
    12月7日,几个错误,拼写错误,遗漏符号:,记忆有误,max-width的作用。gem mini_magick, simple_form
    程序员必读之软件架构
    先进PID控制MATLAB仿真(第4版)
    中文版Illustrator CS6基础培训教程(第2版)
    Android系统级深入开发——移植与调试
    Excel在会计与财务管理中的应用
  • 原文地址:https://www.cnblogs.com/jying/p/6294063.html
Copyright © 2020-2023  润新知