position:relative hides border in Internet Explorer

Question

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);
        }
    });
});

Answer 1

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

Answer 2

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