javascript - HTML CSS 尴尬的表格样式 - 用边框颜色突出显示单个 TD

Question

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

这就是我想要做的 -

.highlight {border-color:red;}

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

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

这是用户单击框时的选定状态，由 javascript 处理。

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

更新我希望它在 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;}