Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

enter image description here

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);
        }
    });
});
like image 578
Andrew Thomas Avatar asked Oct 17 '12 22:10

Andrew Thomas


2 Answers

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

like image 57
Junyo Avatar answered Oct 12 '22 07:10

Junyo


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

like image 3
Afshin Avatar answered Oct 12 '22 07:10

Afshin