Table border affecting cell size

Question

Can anyone tell me why when I place border=1 on a table is fixes its layout?

This is the problem: I wrote some JavaScript that makes me an org chart. If I place a border around the tables that make the chart, everything lines up perfectly. If I remove the borders, some of the lines vary wildly (and seemingly randomly) in width. You will notice this in the red lines that connect the org chart.

This is for the inline attribute of "border" (such as <table border="1">).

Here are two demos:

Borders (good, looks all lined up): http://andrewvantran.com/table1.html

No borders (bad, all misaligned): http://andrewvantran.com/table2.html

I would like the have the table layed out the way it does with borders, but I don't want the borders! I can't simulate the layout of the table with borders unless I keep the borders (which I don't want). Any ideas?

Thanks!

Answer 1

Did you set the table to border-collapse:collapse;? By nature the default collapse is separate where cells have their own borders. If you set it to collapse they merge and it "looks right"

Answer 2

Try to add border-collapse: collapse; to your stylesheet. This seems to fix a lot in your case.

Other than that, I'd suggest you at least use widths for the cells. Different browsers handle cell drawing differently. If you specify a width, you can be more sure the cells align right. When testing your graph, use a inspector tool like Firebug to determine where each cell is located. This will help you a lot.

Answer 3

Thank you very much for the input, but it doesn't seem like there is a definite answer as to why adding borders to a table drastically changes the cell width.

Thanks!