zoukankan      html  css  js  c++  java
  • 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>

     效果如下:

  • 相关阅读:
    css盒模型
    css构造块级元素
    后台数据能刷新,前台页面显示不刷新问题
    java的代理和动态代理简单测试
    基于Maven的S2SH(Struts2+Spring+Hibernate)框架搭建
    SSH框架中配置log4j的方法
    Spring声明式事务配置管理方法
    Hibernate关联关系配置(一对多、一对一和多对多)
    java递归和反向递归
    Java实现几种常见排序方法
  • 原文地址:https://www.cnblogs.com/jying/p/6294063.html
Copyright © 2011-2022 走看看