HTML CSS awkward table styling - highlighting single TD with border colour

Question

For the life of me I cannot seem to figure this out. It seems like a simple thing to do but html tables can be so rebellious.

This is what I'm trying to do -

.highlight {border-color:red;}

Here's a fiddle - http://jsfiddle.net/MuAR4/1/

See that there's gaps missing from box 2, I'm wanting the border to go all the way around with no breaks. The highlight class should also be able to be applied to any other box which all have their own problems.

This is a selected state for when the user clicks on a box, handled by javascript.

Is this even possible? I'm open to using Javascript hacks if necessary.

update I'm wanting this to work in IE7, does anyone have a solution?

Answer 1

You could get creative with background color and border-spacing with a little help from outline like so (note that borders should not be collapsed):

table {
  background: #555;
  border-spacing: 5px;
}
td {
  background: white;
  width:175px;
  vertical-align:top;
}
.highlight {
   outline: 5px solid red;
}

http://jsfiddle.net/MuAR4/9/