position:relative hides border in Internet Explorer

I have a table where the top row is position:relative. In IE 9 adding the position attribute hides the border between the cells. (This doesn't happen in Chrome).

My question is similar to this one, but I can't set the z-index of the top row lower than the other rows because it is going to be a fixed header that needs to have a higher z-index.

HTML

<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

.locked {
            position: relative;
            background-color: Yellow;
        }

How do I get the border to show up, but keep z-index greater than other cells?

Edit: Here is jquery code that explains why the header position is relative. 1. It allows the header to scroll horizontally and vertically. 2. The header stays on the top of screen when you scroll down the page more then 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);
        }
    });
});

Answers


Try this Maybe Helpful

<td class="locked"><div>header 1</div></td>
<td class="locked"><div>header 2</div></td>

table {
border-spacing: 0px;
}
.locked {
  position: relative;
  border:none;
}
.locked div{
  border:2px black solid;
  background-color: Yellow;
  margin:-2px;
}

jsFiddle


If only for CSS3 supported browsers, CSS3 property background-clip can help:

.locked {
    position: relative;
    background-color: Yellow;
    background-clip: padding-box;
}

Details about this property:https://developer.mozilla.org/en-US/docs/CSS/background-clip


Need Your Help

What are the fees to develop on iOS, Android and WP?

android ios windows-phone

I know this is not the perfect place to ask this question, but it is so hard to find a good answer and I prefer to ask experienced professionals.

Which IDE for Phonegap? Is Eclipse enough?

android ios eclipse cordova phonegap-build

I am about to jump into Phonegap and realize that it doesn't have an IDE of its own. I know that I could use Eclipse to create Android-centric Phonegap apps, but what about the iOS and perhaps Wind...