HTML CSS笨拙的表格样式 - 突出显示带边框颜色的单个TD

Question

对于我的生活，我似乎无法弄清楚这一点。这似乎是一件简单的事情，但是html表可以如此反叛。

这就是我要做的 -

.highlight {border-color:red;}

这是一个小提琴 - http://jsfiddle.net/MuAR4/1/

看到方框2中缺少空白，我希望边框一直没有断裂。高亮类也应该能够应用于任何其他都有自己问题的盒子。

当用户点击一个由javascript处理的框时，这是一个选定状态。

这甚至可能吗？如果有必要，我愿意使用Javascript黑客。

更新我希望这能在IE7中运行，有没有人有解决方案？

Answer 1

你可以通过背景颜色和边框间距获得创意，只需要一点点帮助（请注意边框不应该折叠）：

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

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

Answer 2

您的桌子不需要额外的边框，您可以单独使用：http://jsfiddle.net/MuAR4/3/

table, td {border:5px solid #555; border-collapse:separate;}
table {border: 0px;}
td {width:175px; vertical-align:top;}
.highlight {border-color:red;}