0

我需要你的帮助,

我似乎无法弄清楚为什么表中的第一行(ABC-123-123456)会在顶部列固定后消失或似乎被隐藏。由于我的工作使用 IE7,我仍然需要能够拥有与浏览器兼容的粘性列标题。

<!DOCTYPE html>

<html>

<head>

<style type="text/css">
#data_container {
    margin-top: 5px; 
    width: 100%;
    height: 200px;
    overflow-x: scroll;
    overflow-y: scroll;
    border: 1px solid #ccc;

    position: relative;

    color: rgb(60,60,60);
    font-size: 9pt;
}

#data {
    border-collapse:collapse;
    border-spacing: 0; 
    border-right: 1px solid #ccc;
    table-layout: fixed;
}
#data th {
    border-bottom:1px solid #ccc;
    border-left: 1px solid #ccc;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#dcdcdc");
    font-weight: normal;
}   
#data tr {
    text-align: center;
}   
#data td {
    border-bottom:1px solid #ccc;
    border-left: 1px solid #ccc;
    text-align: left;
    padding-left: 6px;
}

#data tr:hover td { background: #f2f2f2; }

#data th, #data td {
    height: 20px;
    width: 130px;
}
#data tr td:first-child, #data tr th:first-child {
    border-left: 0;
}

#data thead tr {
    top:expression(this.offsetParent.scrollTop);
    position: absolute;
}

#data tr:first-child td {
    border-top: 0;
}

</style>

</head>

<body>
<div id="data_container">

<table id="data">

    <!-- Table Header -->
    <thead>
        <tr>
            <th data-sort="string">File Number</th>
            <th>Test Column</th>
            <th>Request Type</th>
            <th>Resize This</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th data-sort="string">Progress</th>
            <th>Vital Task</th>
        </tr>
    </thead>
    <!-- Table Header -->

    <!-- Table Body -->
    <tbody>

        <tr>
            <td>ABC-123-123456</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>100%</td>
            <td>Yes</td>
        </tr><!-- Table Row -->

        <tr>
            <td>ABC-123-942471</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>100%</td>
            <td>Yes</td>
        </tr><!-- Darker Table Row -->

        <tr>
            <td>ABC-123-408126</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>20%</td>
            <td>No</td>
        </tr>

        <tr>
            <td>ABC-123-396225</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>80%</td>
            <td>No</td>
        </tr>

        <tr>
            <td>ABC-123-385417</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td>ABC-123-374250</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td>ABC-123-408970</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td>ABC-123-404552</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td>ABC-123-403102</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>100%</td>
            <td>Yes</td>
        </tr>

        <tr>
            <td>ABC-123-404555</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>23%</td>
            <td>yes</td>
        </tr>

        <tr>
            <td>ABC-123-406789</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>80%</td>
            <td>No</td>
        </tr>

        <tr>
            <td><a href="#yep-iit-doesnt-exist">Hyperlink Example</a></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>80%</td>
            <td><a href="#inexistent-id">Another</a></td>
        </tr>

    </tbody>
    <!-- Table Body -->

</table>
</body>

</html>
4

2 回答 2

0

position:absolute从中删除#data thead tr

jsfiddle

于 2013-07-17T19:15:18.340 回答
0

添加这个

#data tbody{
position: absolute;
top: 24px;
}
于 2013-07-17T19:16:32.150 回答