ТР элемент в таблице отбрасывая верхний CSS свойство применяется к нему

Question

Я работаю над проектом, в котором я кодовую структуру, как -

<div id="scroll" class="datagrid" style="position: relative"> 
<table id="datatable" class="datatable"> 
<thead id="header" class="header"> 
<tr> 
.... 
</tr> 
<tbody id="content"> 
<tr> 
.... 
</tr> 
</tbody> 

Для т.р. в THEAD, мы имели выражение, как -

.header tr 
{ 
    top: expression(document.getElementById('datagrid').scrollTop); 
} 

В IE8 это выражение было оценено, а верхняя часть была установлена ​​так, чтобы заголовок всегда был видимым. Однако, поскольку выражения не работают в IE11, поэтому мы можем написать функцию JavaScript для этой цели.

Однако в IE11 верхнее свойство не работает должным образом. Даже после его применения заголовок не отображается.

Может кто-нибудь, пожалуйста, сообщите, что может быть неправильным?

PS: Мусор я попытался было:

document.getElementById("header").getElementsByTagName('tr')[0].style.top = document.getElementById('scroll').scrollTop ; 

Answer 1

CSS выражения работают только в IE8 и ниже.

Вы можете использовать функцию Javascript, чтобы заменить выражение как это:

var headerTR = document.getElementById("header").getElementsByTagName("tr"); 
for(var i = 0; i < headerTR.length; i++) { 
    headerTR[i].style.top = document.getElementById('datagrid').scrollTop; 
} 

Надежда, что помогает.

Answer 2

style.top принимает строковое значение. Попробуйте добавить к вашему выражению +"px".

document.getElementById("header").getElementsByTagName('tr')[0].style.top = document.getElementById('scroll').scrollTop+"px"; 

Кроме того, убедитесь, что вы используете выражение при каждом прокрутке. Например, вы можете использовать onscroll="someFunction()".

<div id="scroll" class="datagrid" style="position: relative" onscroll="scrollFunction(this.id)"> 
... 
<script> 
    function scrollFunction(scrollId) { 
     var theHeader = document.getElementById('header').getElementsByTagName('tr')[0]; 
     var scrollBoxTop = document.getElementById(scrollId).scrollTop; 

     theHeader.style.top = scrollBoxTop + "px"; 
    } 
</script>