UBB.Developers Forums Community Development Programming HTML, CSS, and JavaScript Table Borders

Table borders annoy me very easily. Simply because they're so awkward to handle.

Here's the deal: I've got two tables right next to each other. The lower table collapses/uncollapses when a link in the upper table is clicked.

Collapsed:


Uncollapsed:


The problem is, I know that when two tables are shoved right next to each other, there's a horrible thick line where they meet (because there are really two borders there, not one). I'd like to make the top and bottom borders of the collapsing table invisible, so that when the tables are collapsed/uncollapsed, they look like this:

Collapsed:


Uncollapsed:


I'm 100% certain it can be done with CSS (most of that site is actually CSS-driven, and soon it will be totally CSS-driven), so is there anyone willing to put the final piece in the jigsaw and help me solve this small problem?

Thanks in advance

(The page I\'m working on, in case you need to see the HTML)