html – position：相对隐藏Internet Explorer中的边框

我有一个桌子,顶排是位置：相对.在IE 9中添加position属性隐藏单元格之间的边界. (Chrome不会发生这种情况).

我的问题类似于this one,,但是我不能将顶行的z-index设置为低于其他行,因为它将是需要具有较高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;
        }

如何让边框出现,但是保持z-index大于其他单元格？

编辑：
这里是jquery代码,它解释了为什么头位置是相对的.
它允许标题水平和垂直滚动.
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;
}

jsFiddle