CSS, <table> borders: How do I prevent a border added to a table cell from displacing neighboring cells?

Question

I have cells that have borders of width 1px and width 2px, and the rest have no borders. The bordered cells subtly adjust the spacing of surrounding cells. I don't want this. How do I prevent it, while still enabling different sizes of borders for different cells?

Answer 1

I think you'll either need to size all non border cells wider and higher by the width of the line around it.

or you given them all borders and set some to be the background color.

or size the ones with borders smaller by the size of their borders <-- not sure this will work but it's what i'd be trying

edit

Another alternative might be to put all your controls within a div, then have the div inside your td. that way you could apply the border to the div and the td's columns and rows will all expand naturally

edit 2

do you need to use a table? can you use div's and place them with html? this might make it easier.

Answer 2

Would setting negative padding to compensate for the border width work?