Position: относительная скрывает границу в Internet Explorer

У меня есть таблица, где верхняя строка - позиция: относительная. В IE 9 добавление атрибута position скрывает границу между ячейками. (Это не происходит в Chrome).

Мой вопрос похож на этот,, но я не могу установить z-индекс верхней строки ниже других строк, потому что это будет фиксированный заголовок, который должен иметь более высокий z-индекс.

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

Как получить границу для отображения, но сохранить z-индекс больше, чем другие ячейки?

Изменить: Вот код jquery, который объясняет, почему позиция заголовка относительна.
1. Он позволяет прокручивать заголовок горизонтально и вертикально.
2. Заголовок отображается в верхней части экрана при прокрутке вниз страницы более 153 пикселей.

$(document).ready(function () {
    $(window).scroll(function(){ 
        var off = $(window).scrollTop();
        if (off < 153) {
            $(".frozenTop").css("top", 0);
        } else {
            $(".frozenTop").css("top", off - 153);
        }
    });
});

Ответы

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

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