Initially, I was skeptical that this styling would be achievable in Chrome/Firefox, but to my surprise, it worked! However, the same cannot be said for Internet Explorer (typical, right?).
Despite functioning properly in Chrome/Firefox/Safari/Opera, I hoped that it might also work in the latest versions of Internet Explorer, unfortunately, I encountered the same issue from IE11 downwards. I haven't tested it in EDGE yet.
If you want to view the mark-up/CSS, you can check out this CodePen link: http://codepen.io/moy/pen/yewbBx
Basically, I have a standard table with rows where the 'selected' row is slightly wider than the rest. This effect is achieved using the :before pseudo-class for the first and last <td> elements of a selected row, similar to this:
tr.selected td {
background-color: @brown-lightest;
position: relative;
}
tr.selected td:first-child:before,
tr.selected td:last-child:before {
background: @brown-lightest;
content: "";
display: block;
height: 100%;
position: absolute;
left: -5px;
top: 0;
width: 5px;
}
tr.selected td:last-child:before {
left: auto;
right: -5px;
}
Sometimes it appears to be working fine, but it seems like both the first and last <td> must have the same height for it to work correctly. Even though td:before {height: 100%;} is specified, it seems to take the height of the text rather than the <td>. It's puzzling since in a table layout, all row heights should be consistent, right?
I realize that this might not be achievable in IE, but I wanted to explore if anyone has any insights as to why this issue may be occurring, just in case it's something beyond the browser limitations.
Thank you in advance!