html - 如何在表格单元格周围创建粗体/"cursor"边框？

Question

我需要一个可以在表格中的两个单元格之间移动的光标。这是 jsFiddle:http://jsfiddle.net/KNc5u/

如果您单击表格，光标将在选择整个单元格、选择单元格底部和顶部之间循环。

如您所见，表格在光标移动时“跳跃”，因为边框宽度发生了变化。这太丑了。我怎样才能避免这种情况？

约束:

• 光标必须为 2 像素宽(不是 1 也不是 3)
• 首选纯 CSS
• 请不要添加额外的 HTML 元素(我可以通过用一个 div 包装每个单元格来轻松做到这一点，该边框有一个 1 像素的白色边框，但我会变成黑色，但我正在寻找一种解决方案不要向 DOM 添加垃圾)
• CSS3 可以
• 我可以忍受 IE10+:-)

Answer 1

正如您所说，您可以使用 css3，您可以摆弄 box-shadow:http://jsfiddle.net/KNc5u/10/

此示例仅适用于现代浏览器，不使用任何 vendor prefixes像 -moz 或 -webkit。如果您需要支持其他浏览器，您可以轻松地将这些前缀添加到现有的 box-shadow属性。

请随意根据您的需要更改颜色关键字......

td {
    text-align:center;
    border:1px solid blue;
    padding:1px 2px
}

.selected {
    display:block;
    border:none;
    box-shadow: inset 0 0 -2px 0 #000;
}

.selBottom {
    display:block;
    border:0;
    box-shadow: 0 0 black inset, 0 -2px red inset, 0 0 black inset, 0 0 black inset;
}

.selTop {
    display:block;
    border:0;
    box-shadow: 0 2px green inset, 0 0 black inset, 0 0 black inset, 0 0 black inset;
}

更新

这是一个更新版本(恕我直言):http://jsfiddle.net/KNc5u/13/

但是，它应该可以解决所提供标记的问题。请注意，这里有一个提示:此示例仅在 td 和您的 selected、selBottom 和 selTop 类。

更新2

现在有了左右支持:http://jsfiddle.net/KNc5u/15/