Question

我在除Internet Explorer之外的每个浏览器中都有此功能！我不知道为什么会这样，你能提供的任何信息都会很棒！检查下面的代码以及我尝试过的内容。这个小小的网络应用程序是我帮助的酒店。您会在我的CSS中注意到，tbody有overflow:auto，这适用于Chrome，Firefox，但不适用于IE ...

这是我的代码：

CSS

tr, td, label{
    font-family: arial, verdana, sans-serif;
    text-align: center;
}
th{
    font-weight: bold;
    background-color: #380040;
    text-align: center;
    padding:20px 0;
    color: #fff;
    border-radius: 5px;
}
tr{
    height: 20px;
}
td{
    background-color: #444;
    text-align: center;
    color: #fff;
    width: 180px;
    padding: 10px;
}
thead{
    display:block;
    position: relative;
}
tbody{
    height: 500px;
    overflow: auto;
    display: block;
}

HTML

 <table>
            <thead>
                <tr> 
                    <th width="188px">Room Number: </th>
                    <th width="193px">Room Charges:</th>
                    <th width="193px">Adult: </th>
                    <th width="212px">Status: </th>
                </tr>
            </thead>
            <tbody>
                <?php foreach($output['data']['rooms'] as $info): ?>
                    <tr>
                        <td><?php echo $info['room_number']; ?></td>
                        <?php $services = reset($info['services']); ?>
                        <td><?php echo ($services['room_charges']['enabled'] == 1) ? 'ENABLED' : 'DISABLED'; ?></td>
                        <td><?php echo ($services['adult']['enabled'] == 1) ? 'ENABLED' : 'DISABLED'; ?></td>                
                        <td><?php echo $info['status']; ?></td>
                    </tr>
                    </body>
                <?php endforeach; ?>
            </tbody>
        </table>

我实际上构建了一个动态表，但这个问题仍然适用于实际的表。我已尝试将position:relative添加到th，但这也无效。如果你能指出我正确的方向，任何信息都会很棒吗？

的jsfiddle： http://jsfiddle.net/0aqmb2mq/

当thead在Internet Explorer中保持固定时，创建可滚动的tbody

0 个答案: