Question

在资源管理器中，我能够在使用css表达式滚动时保持桌面的thead部分。以下是执行此操作的css代码段：

.standardTable thead tr {
position: relative;
top: expression(offsetParent.scrollTop);
}

但是这同样不适用于chrome，因为chrome的表达式已被弃用。我需要帮助改变＆＃34; top＆＃34;使用javascript或jquery的上述类的属性。

是否可以使用javascript或jquery更改上述css中的top属性。

我已经经历了很多例子，但它们似乎都没有完美地运作。

（PS：我正在寻找改变上述代码的top属性的单行代码）

可以吗？

Answer 1

.standardTable thead tr {
    position:fixed;
    background-color: #fff;
}

此处示例：http://jsfiddle.net/hweb/4wZAU/

Answer 2

<style>
#ministres thead {
    display:block;
}
#ministres tbody {
    display:block;
    height:5em; /* 5 times the equivalent of a text "size". */
    overflow-y:scroll;
}

    #ministres thead tr th:nth-child(1) { /* column 1 ! */
        width:5em;
    }
    #ministres thead tr th:nth-child(2) { /* column 2 */
        width:10em;
    }
    #ministres tbody tr:first-child td:nth-child(1) { /* column 1 ! */
        width:5em;
    }
    #ministres tbody tr:first-child td:nth-child(2) { /* column 2 */
        width:10em;
    }
</style>
<table id="ministres" border="1">
    <thead>
        <tr><th>Nom</th><th>Ministère</th></tr>
    </thead>
    <tbody>
        <tr><td>JM Ayrault</td><td>Premier</td></tr>
        <tr><td>L Fabius</td><td>A. Etrangères</td></tr>
        <tr><td>V Peillon</td><td>Education</td></tr>
        <tr><td>C Taubira</td><td>Justice</td></tr>
        <tr><td>P Moscovici</td><td>Economie</td></tr>
        <tr><td>M Valls</td><td>Intérieur</td></tr>
    </tbody>
</table>

例如：http://jsfiddle.net/hweb/7eGT9/

使用JS滚动时设置固定的表头

2 个答案: