[英]To set table headers fixed while scrolling using JS
在資源管理器中,使用css表達式滾動時,我可以保持表的thead部分固定。 以下是執行此操作的CSS代碼段:
.standardTable thead tr {
position: relative;
top: expression(offsetParent.scrollTop);
}
但是,由於chrome不贊成使用表達式,因此這在chrome中不起作用。 我需要使用javascript或jquery更改上述類的“ top”屬性的幫助。
是否可以使用javascript或jquery更改上述CSS中的top屬性。
我已經看過很多例子,但是似乎沒有一個例子做得很好。
(PS:我正在尋找一行代碼來更改上面代碼的top屬性)
能做到嗎
.standardTable thead tr {
position:fixed;
background-color: #fff;
}
此處的示例: http : //jsfiddle.net/hweb/4wZAU/
<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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.