Question

I’m using the following CSS to border a <tr> entirely.

<style type="text/css">
    tr.top td { border-top: thin solid black; }
    tr.bottom td { border-bottom: thin solid black; }
    tr.row td:first-child { border-left: thin solid black; }
    tr.row td:last-child { border-right: thin solid black; }
</style>

It works perfectly in Mozilla Firefox but in Internet Explorer, it doesn’t border the last right <td> as shown in the following snap shots.

In Firefox, it displays the following table.

In Internet Explorer(8) however, it displays the table as follows.

Means that in the above CSS, this CSS class tr.row td:last-child { border-right: thin solid black; } doesn’t work in IE. What is the solution to this? I’m using IE 8.

Answer 1

IE 8 doesn’t support the :last-child pseudo class (CSS 3), but it does support :first-child (CSS 2.1)

CSS Compatibility and Internet Explorer

You’ll need a different selector for the last cell such as a custom class name.