html – 可滚动表在IE8中有额外的不需要的空间

2023年1月9日 152次阅读

在安装了bootstrap.css的网站上,我有以下可滚动表：

!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table class="table table-condensed scrollable">
            <thead>
                <tr>
                    <th colspan="4">
                        Application Event Log <br />
                        Time Source ... ...
                    </th>
                </tr>

            </thead>
            <tbody id="testlogEvents" class="scrollable">  
               <tr id="13705" class="warning">
                 <td>10:23</td>
                 <td>IIS Express</td>
                 <td>3</td>
                 <td>null</td>
                </tr>
               <tr id="13704" class="warning">
                 <td>10:20</td>
                 <td>TestLog</td>
                 <td>4</td>
                 <td>null</td>
               </tr>      
             </tbody>
        </table>
    </body>
</html>

使表可滚动的CSS如下所示：

.scrollable table {
    border-collapse: collapse;
    width: 100%;
}

.scrollable thead {
    text-align: left;
    display: table;
    float: left;
    width: 100%;
}

    .scrollable thead tr {
        display: table-row;
        width: 100%;
    }

.scrollable tbody {
    display: block;
    height: 60px;
    overflow: auto;
    float: left;
    width: 100%;
}

    .scrollable tbody tr {
        display: table;
        width: 100%;
    }

    .scrollable tbody tr {
        height: 18px;
    }

    .scrollable tbody td {
        padding: 1px 8px;
        width: 25%;
    }

.scrollable th, td {
    width: 25%;
}

问题是这样的：

(忽略未正确放置的’表头’).

IE8中的这个额外空间非常不受欢迎,因为我需要所有可以使用的空间.

这个额外的间距来自何处,如何将其删除？

最佳答案 我有完全相同的问题.罪魁祸首是对周围元素的修正.思考与内容有关：’.’部分.

切换到更新的clearfix修复它http://nicolasgallagher.com/micro-clearfix-hack/

您可能希望将标题更改为表格标题,然后将所有标题单元格作为单独的TH单元格.或者至少：

<thead>
    <tr>
        <th colspan="4">Application Event Log</th>
    </tr>
    <tr>
        <th>Time</th>
        <th>Source</th>
        <th>Count</th>
        <th>...</th>
    </tr>
<thead>
点赞