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>

 效果如下:

原文地址:https://www.cnblogs.com/jying/p/6294063.html