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>

     效果如下:

  • 相关阅读:
    MVVM CopyValuesTo接触属性上下级关联
    怎样控制WPF GroupBox.HeaderTemplate中的控件
    wpf动态创建DataGrid
    mvvm 绑定textbox焦点丢失问题
    C# 导出CSV文件
    使用C#选择文件夹、打开文件夹、选择文件或者如何使用C#选择文件夹
    EF 强制从数据库刷新集合
    WPF及Silverlight中将DataGrid数据导出
    VS 2005中winForm开发(C#)—图片上传到数据库与显示(sql server 2005)
    数据导出为csv文件时 数值型数据为科学计数法 时间被截取的解决方法
  • 原文地址:https://www.cnblogs.com/jying/p/6294063.html
Copyright © 2011-2022 走看看