Table pseudo class height (IE)

[grimski]

Firstly, I didn’t think this would be possible in Chrome/Firefox but surprisingly it worked. However it isn’t consistent in Internet Explorer (What’s new?).

I thought it might at least work in IE 11/10 but I get the same issue from IE11 down. I’ve not been able to test in EDGE yet. I understand I might just have to accept this doesn’t work in IE at all but I thought it was worth asking the question first…

I have a pretty standard table but a row which is ‘selected’ is slightly wider than the rest. I achieved this by targeting the pseudo classes for tr.selected td:first-child:before and tr.selected td:last-child:before, of the selected row. Then style the accordingly and using a negative right/left value to show them outside the constraints of the table

Here’s a CodePen showing the code, works fine in Chrome/FireFox/Safari/Opera:

http://codepen.io/moy/pen/yewbBx

Sometimes it looks like it works (and it does) but this is when all the content is the same height, i.e. text doesn’t wrap onto a separate line in one of the td’s. You should be able to see this in Internet Explorer in the CodePen as I’ve used <br /> tags to demonstrate.

Even though td:before { height: 100%;} is set, it looks like it goes off the height of the content rather than it’s parent <td>. Which is strange as with it being a table layout the heights of each <td> in a row should be the same?

Thanks in advance, hope someone can shed some light on this. Even if it is just to say “It won’t work in IE at all”! Maybe there’s a way I can just hide the effect in all IE browsers, as it’d be a shame to lose it in everything else seeing as it works.

[Author]

Posts