Go Back

The TR tag and borders

Yesterday, I was trying to apply a top border on a table row, but no matter what I could not get it show up.

I could change the background color of the rows in question using a particular class, but trying to change border properties would not work.

.dirTable tr {border-top:1px solid gray; border-left:none; border-right:none; border-bottom:none; margin: 0; padding: 0; background-color:red;}

Using the above, I would see red in the background of my table, but no gray borders and a small white border on all of the cells in the table.

It was so frustrating because, I had used nearly identical markup on another site which was still working as expected.

It turns out that the original site makes use of the Eric Meyers CSS Reset and the new site has a section for CSS reset included in the 1140 CSS Grid.

The key difference was the Meyers reset contains:

table { border-collapse: collapse; border-spacing: 0;

Adding the border-collapse property to my table class fixed the problem:

.dirTable {border-collapse:collapse;border-left:1px solid gray;border-right:1px solid gray;border-bottom:1px solid gray;}

While looking for this solution, Sarven Capadisli's Blog post from 2006 got me on the right track! Seems like a simple problem, but it wasted too much of my time. Hopefully my post will help someone else save time... or at least help me remember the next time I run across it.

  • Facebook
  • Twitter
  • DZone It!
  • Digg It!
  • StumbleUpon
  • Technorati
  • Del.icio.us
  • NewsVine
  • Reddit
  • Blinklist
  • Add diigo bookmark