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

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