Question

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

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

正如您所看到的，当光标移动时，表格会“跳转”，因为边框宽度会发生变化。这很难看。我该如何防止这种情况？

约束：

光标必须是2像素宽（不是1而不是3）
纯CSS首选
请不要使用其他HTML元素（我可以通过使用带有1像素白色边框的div包裹每个单元格来轻松完成此操作，但是我正在寻找一种不添加垃圾的解决方案到DOM）
CSS3没问题
我可以使用IE10 +： - ）

Answer 1

正如你所说的你对css3没问题你可以摆弄盒子阴影：http://jsfiddle.net/KNc5u/10/

此示例仅适用于现代浏览器，不使用-moz或-webkit之类的任何vendor prefixes。如果您需要支持其他浏览器，则可以轻松地将这些前缀添加到现有的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;
}

更新

这是一个更新版本（imho to hacky）：http://jsfiddle.net/KNc5u/13/

但是它应该解决您提供的标记问题。请注意，有一个提示：此示例仅适用于td和selected，selBottom和selTop类的相似颜色。

更新2

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

Answer 2

使用outline代替border并删除填充。

http://jsfiddle.net/KNc5u/3/

或者，更改单元格背景颜色以突出显示它而不是使用轮廓。

编辑：Erp所以不会只做顶部/底部。事实证明，这非常棘手而且不是很混乱。我在这里使用带有工作光标的背景颜色有一个很好的版本（点击任何单元格）http://jsfiddle.net/KNc5u/7/

如果表格单元格是固定大小，您也可以使用背景图像来提供不同类型的高光光标。

Answer 3

您可以通过将padding添加到td

来减少表格的移动

td { border: 1px solid blue; padding:4px}

<强> DEMO

如何在表格单元格周围创建粗体/“光标”边框？

3 个答案:

更新

更新2