How to apply tr border to tables in Internet Explorer 6

Updated: 2006-05-11

I am sure many of you may have come across this during your design phase; IE6 does not acknowledge borders for the tr element. What is the work around you ask?

Since fighting with Internet Explorer to get certain styling working is a futile war, in some cases we have to pull a few tricks. The key in this trick is to give the illusion that the td element is continuous in a given tr. It is that simple. Assign the collapse value for the border-collapse property to get rid of any of the spacing between td's on a given table. Then add your preferred border style for all of the td's within that tr. The following code illustrates this idea (specific styling for a tr can be made by adding a class for that row).

table { border-collapse:collapse; }
td { border-bottom:1px solid #0f0; }
Row1, Col1 Row1, Col2 Row1, Col3
Row2, Col1 Row2, Col2 Row2, Col3
Row3, Col1 Row3, Col2 Row3, Col3

In this case, border-collapse must be collapsed to get the right effect in Internet Explorer. This idea seems quite simple, yet easily overlooked or not worthy of attention because well... its for Internet Explorer. Why IE simple does not style tr is in the same set of mind-boggling questions that has been inquired about IE.

For further details, please see W3C's table border models in CSS.

Published

Interactions

43 interactions

Grateful replied on

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.

Jim replied on

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; }

per replied on

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.

Splendor’s photoSplendor replied on

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?

Johan’s photoJohan replied on

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...

rob’s photorob replied on

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!

Sumesh’s photoSumesh replied on

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

Darren’s photoDarren replied on

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

AJ replied on

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.

Mag’s photoMag replied on

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

Szion replied on

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.

Ian’s photoIan replied on

@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.

mrmagic2009’s photomrmagic2009 replied on

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>

Lynchory’s photoLynchory replied on

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>

Raj replied on

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

DNA replied on

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???

Mirek replied on

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

xcf’s photoxcf replied on

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!

Krishna’s photoKrishna replied on

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

Zloi replied on

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.

Shahzeb’s photoShahzeb replied on

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

Enjay replied on

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!

Thomas’s photoThomas replied on

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...

Comments are currently closed for this article.