I am experiencing an issue with a table where the top row has a position:relative attribute. In Internet Explorer 9, adding this attribute causes the border between the cells to disappear (this does not happen in Chrome).
Although my question is similar to this one, I cannot set the z-index of the top row lower than the other rows because it will be a fixed header requiring a higher z-index.
Below is the HTML code:
<table border="1">
<tr >
<td class="locked">header 1</td>
<td class="locked">header 2</td>
</tr>
<tr >
<td>data 1a</td>
<td>data 1b</td>
</tr>
<tr >
<td>data 2a</td>
<td>data 2b</td>
</tr>
</table>
CSS code:
.locked {
position: relative;
background-color: Yellow;
}
If anyone knows how to resolve this issue and display the border while keeping the z-index greater than other cells, please advise.
Edit:
Here is a jQuery code snippet that explains why the header position is relative:
1. It allows the header to scroll horizontally and vertically.
2. The header remains at the top of the screen when scrolling down more than 153 pixels.
$(document).ready(function () {
$(window).scroll(function(){
var off = $(window).scrollTop();
if (off < 153) {
$(".frozenTop").css("top", 0);
} else {
$(".frozenTop").css("top", off - 153);
}
});
});