How to apply tr border to tables in Internet Explorer 6

Thank you very much :]

I've been struggling with this. Thanks for the confirmation that IE just doesn't honor border properties on tr's and for the suggested workaround.

It is possible to get IE to apply the row border to all member td's using the following code: tr td { border:1px solid green; }

Thanks for the info. I've had this trouble for quite a while now, and couldn't figure out if it was IE's fault or just me, and found no workaround. Your solution works like a charm.

Nice idea, but when you want to give a tr a left, right and top border you will need at least 3 different classes. Not very efficient. Any idea how to solve that?

I'm very sorry, but these are cell borders. To let it look like a real row border (so no border between col1 and col2), you have to make a whole mass of css...

No you don't...

table tr td { border-bottom:1px solid green }

or...

table tr td { border-top:1px solid green }

Mix and match according to taste!

@Johan you are correct, I noticed that as well and left the 'updated' note to be revisited.

@rob: thank you for initiating this.

(Sorry for the slow response)

Thanks a lot . This solved my problem of providing border to only td.

Hi, the above method helps to get border for all the trs in the table. What should be done to get border for a particular tr alone

Thanks Sumesh

Thanks for the tip, but I can't get it to work. Does this depend on a particular doctype declaration?

U can give "display:block" property to show borders on tr.

Hi Sumesh, to get a border for just one row, do this:

table tr.special td { border-bottom:1px solid green }

and then any tr element that you specify with a class of "special" will have a line under it.

Thank You Indeed , i used this trick in my website.

Wow such a basic thing but yes works like a charm. IE - you rogue! Thanks for the clear presentation of good info.

@AJ: This code don't display border on Internet Explorer :) only Firefox.

table tr.special td { border-bottom:1px solid green }

I get a little more frustrated each time I use an MS product. From SQL to Vista to IE, they're just poor products.

<tr ...

works great in Konquerer. It works as one would expect it to work. MS has this insatiable urge to force people in the direction MS thinks is best. It would be analogous to driving a highly automated car that forced you to take the shortest route when today, you wanna take the scenic route.

I steer as many people as I can away from MS products and only use them when the job absolutely requires it.

Thank you very much, this was very helpful.

@Splendor, johan, rob

To clarify rob's fix, you can do the border-bottom (or top) on the tds, and then the left/right/top (or bottom) on the table itself.

I think IE does display the borders, but it is invinsible. I set the border color to black or green or whatever and it shows right.

<TABLE BORDER=1 BORDERCOLOR=BLACK>

If in the case you need table {border-collapse: separate}

You can add a empty <tr>, like this: tr.line {height:1px;background:black}

And in most case you need "colspan" to finish it.

<tr><td></td></tr>

Thank you so much.. saved me much frustration.

Thank you so much.

Excellent article. I needed to put a right border on all trs except for the first one. Your solution worked. Thanks

Stupid IE! I think W3C need to legislate a law against Microsoft Internet Explorer standards.

It is very annoying for web developers to support websites in IE standards.

Microsoft, It's so hard to follow the W3C standards??? Why you always need to be abnormal???

table { border-collapse:collapse; } didn't work for me...

but -

table tr.someclass td {borderyoulike} as AJ said works on IE6 and IE7 in my case. try it out.

@DNA - i totally agree

In ie, thead,tr 's border or background-image has this problem.

How do you realise this: tr.highlight{border:1px solid red;}

<tr>???</tr>
<tr>...</tr>
<tr>???</tr>
<tr>...</tr>
<tr>???</tr>
<tr>...</tr>

it's easy in Firefox!

Thanks for saving my day!!

Thank you very much. till now we are using bg for getting border but now due to tour code it worked.

2 xcf:

I fond interesting solution for Rows image background, the rows highlighting on mouse over, without JS.

tr { background-image: IMG_SRC;}
tr:hover { background-image: IMG_SRC2;} 

here is a full article: http://www.sopov.com/joomla-wordpress-tips-and-tricks/70-how-highlight-table-row-background.html

Works in all browsers. For IE6/7/8 FIX: add to tr{ position: relative; } and td{ background-image: none } and for Safari i use negative background position for each TD.

Exact solution of what I've been looking for. THank you so much for sharing!!

wow thanks it works! I'm about to remake my code for IE though...

simple solution to a frustrating problem. thanks :)

Thanks for the tip!

Thanks a lot man. It really helped me a lot. An awesome solution yaar.

Thank you very much for the tip !

This will not work if the cell is empty. I am having issues.

Thanks for the write up!

Out of all the solutions out there on google, this is the only one that worked for me. Thanks a ton man !

Interestingly, row borders seem to work in IE8 when running code in the Visual Studio 10 IDE, but not when deployed to IIS6/7. Come on Microsoft - sort it out!

Thanks for this! I could never figure out why borders looked different in IE than in every other browser. Wish MS would get their act together...

Nice job! It solved my problem with IE7. I was applying border-bottom to "tr" tag but for IE7 must be on "td" tag.

Thankx very much for this fix. Helped me out with my <tr> border issue.

Compatible with IE8 too??