17

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);
        }
    });
});
6
  • 1
    Why do you need to position those cells at all? Oct 17, 2012 at 22:45
  • the top row will be a fixed header using jquery. i left out the code to keep it simple. Oct 17, 2012 at 22:48
  • What is the position: relative accomplishing for you? Oct 17, 2012 at 22:48
  • @AndrewThomas - that's an important aspect of this question, it may be other styles are being applied by the JS when its executed. Try going into a DOM inspector and looking for all of the transformed CSS. Oct 17, 2012 at 22:56
  • also, you should include the script - that may be the problem... It's always a fine line between providing too much info and not enough on this site. But in this case, i'd say at least mentioning hey, this is the end goal i'm trying to achieve... that way people can actually see where you're trying to go with it and stop you if you're doing something dumb. Oct 17, 2012 at 22:58

2 Answers 2

25

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

0
3

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

3
  • This is close. IE9 now has white spacing between the cells. (curiously they don't show up in the jsfiddle pane). Oct 18, 2012 at 19:12
  • @AndrewThomas,I changed my answer take a look.
    – Afshin
    Oct 19, 2012 at 6:26
  • 1
    Reproducing the border in the div is one way, but you can use the actual table cell border if you make the table cells "own" their border. Add table { border-collapse: separate; border-spacing: 0 } and the cells should then each have separate borders that move with the cell, and zero space in between. See jsfiddle.net/dlaliberte/a9awheqd
    – dlaliberte
    Mar 3, 2015 at 19:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.