Tim Van Damme Inspired by Tim Vand Damme

Network

Your Ad Here

Blog

Thursday, November 27, 2008

How to apply tr border to tables in Internet Explorer 6

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.

0 comments:


munna's Design by Insight Sharing by Premium Themes © 2009