Search

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.

Tags
Published
Monday, January 31, 2005

Entry Reaction

Reader Comments (30)

  1. Comment by Ilya replied on #2005-01-31 12:58:40

    Thank you very much :]

  2. Comment by Grateful replied on #2006-01-01 16: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. Comment by Jim replied on #2006-01-20 19: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. Comment by per replied on #2006-08-23 09: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. Comment by Splendor's photo Splendor replied on #2007-03-13 12: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. Comment by Johan replied on #2007-03-20 05: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. Comment by rob replied on #2007-05-11 11: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. Comment by Sarven Capadisli replied on #2007-05-11 14: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. Comment by Ram replied on #2007-06-08 09:18:37

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

  10. Comment by Sumesh replied on #2007-06-13 04: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. Comment by Darren replied on #2007-07-16 19:09:54

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

  12. Comment by Nitesh replied on #2007-08-29 00:09:04

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

  13. Comment by AJ replied on #2007-09-04 11: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. Comment by Ankit replied on #2007-09-26 07:23:40

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

  15. Comment by Mag replied on #2007-10-19 06: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. Comment by Victor De la Rocha's photo Victor De la Rocha replied on #2007-12-11 11:03:53

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

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

  17. Comment by Szion replied on #2008-03-30 20: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. Comment by Steve K replied on #2008-05-27 18:50:24

    Thank you very much, this was very helpful.

  19. Comment by Ian's photo Ian replied on #2008-07-15 12: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. Comment by mrmagic2009 replied on #2008-07-26 10: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. Comment by Lynchory replied on #2008-09-05 11: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. Comment by mj replied on #2009-05-03 15:17:36

    Thank you so much.. saved me much frustration.

  23. Comment by Matt S replied on #2009-05-15 10:36:49

    Thank you so much.

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

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

  25. Comment by DNA replied on #2009-10-20 05: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. Comment by Mirek replied on #2009-11-09 07: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. Comment by xcf replied on #2009-11-24 00: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;}

    ??? ... ??? ... ??? ...

    it's easy in Firefox!

  28. Comment by K replied on #2010-02-03 09:08:24

    Thanks for saving my day!!

  29. Comment by Krishna replied on #2010-02-09 04:00:12

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

  30. Comment by Zloi replied on #2010-03-03 06: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.

Leave a comment

* marked fields are required.

  • (will not be published)