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
2005-01-31
Replies
43

Entry Reaction

Reader Comments (43)

  1. Ilya replied on #2005-01-31 19:58:40

    Thank you very much :]

  2. Grateful replied on #2006-01-01 23:14:47

    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.

  3. Jim replied on #2006-01-21 02:25:45

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

  4. per replied on #2006-08-23 16:27:28

    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.

  5. Splendor's photoSplendor replied on #2007-03-13 18:50:29

    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?

  6. Johan replied on #2007-03-20 11:12:40

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

  7. rob replied on #2007-05-11 18:07:47

    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!

  8. Sarven Capadisli's photoSarven Capadisli replied on #2007-05-11 21:37:02

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

  9. Ram replied on #2007-06-08 16:18:37

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

  10. Sumesh replied on #2007-06-13 11:53:47

    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

  11. Darren replied on #2007-07-17 02:09:54

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

  12. Nitesh replied on #2007-08-29 07:09:04

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

  13. AJ replied on #2007-09-04 18:41:06

    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.

  14. Ankit replied on #2007-09-26 14:23:40

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

  15. Mag replied on #2007-10-19 13:24:34

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

  16. Victor De la Rocha's photoVictor De la Rocha replied on #2007-12-11 18:03:53

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

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

  17. Szion replied on #2008-03-31 03:01:34

    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 onmouseover="this.style.border='1px solid red';" ...
    

    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.

  18. Steve K replied on #2008-05-28 01:50:24

    Thank you very much, this was very helpful.

  19. Ian's photoIan replied on #2008-07-15 19:11:25

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

  20. mrmagic2009 replied on #2008-07-26 17:40:52

    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>
    
  21. Lynchory replied on #2008-09-05 18:42:09

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

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

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

    <tr style="height:1px;background:black"><td></td></tr>
    
  22. mj replied on #2009-05-03 22:17:36

    Thank you so much.. saved me much frustration.

  23. Matt S replied on #2009-05-15 17:36:49

    Thank you so much.

  24. Raj replied on #2009-10-03 10:03:04

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

  25. DNA replied on #2009-10-20 12:30:33

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

  26. Mirek replied on #2009-11-09 14:05:13

    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

  27. xcf replied on #2009-11-24 07:40:37

    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 class="highlight">...</tr>
    <tr>???</tr>
    <tr class="highlight">...</tr>
    <tr>???</tr>
    <tr class="highlight">...</tr>
    

    it's easy in Firefox!

  28. K replied on #2010-02-03 16:08:24

    Thanks for saving my day!!

  29. Krishna replied on #2010-02-09 11:00:12

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

  30. Zloi replied on #2010-03-03 13:50:08

    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.

  31. PC replied on #2010-03-18 14:03:12

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

  32. yow's photoyow replied on #2010-03-29 22:08:30

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

  33. kevin replied on #2010-07-15 13:11:24

    simple solution to a frustrating problem. thanks :)

  34. Jacob's photoJacob replied on #2010-07-20 21:42:39

    Thanks for the tip!

  35. Kapil replied on #2010-08-12 16:42:45

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

  36. Anthony replied on #2010-11-11 17:15:25

    Thank you very much for the tip !

  37. Hawaii Web Design's photoHawaii Web Design replied on #2010-12-03 01:22:58

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

    Thanks for the write up!

  38. Shahzeb replied on #2011-08-09 01:52:44

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

  39. Enjay replied on #2011-09-23 12:35:35

    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!

  40. Thomas replied on #2011-09-23 22:27:36

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

  41. Abdel Bolanos's photoAbdel Bolanos replied on #2012-04-05 16:26:12

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

  42. Scott replied on #2012-04-25 09:48:48

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

  43. Doneer replied on #2012-10-26 21:59:14

    Compatible with IE8 too??

Comments are currently closed for this article.