CODEWITHSUNDEEP
css
Bhavesh
Bhavesh

Reputation: 4677

CSS to border <tr> entirely doesn't work properly in Internet Explorer

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.

enter image description here

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

enter image description here

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.

Upvotes: 0

Views: 731

Answers (2)

Ivan Machado
Ivan Machado

Reputation: 169

btw, what if you declare the border out of the css file, but instead after style, within the TD tag? I was told that IE8 has some bugs with border rendering. Post it here, and see if it works.

another doubt, why don't you use 1px instead of thin!?

Upvotes: 1

MikeM
MikeM

Reputation: 27405

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.

Upvotes: 3

Related Questions