0

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

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

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

约束：

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

3 回答 3

3

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

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

随意更改颜色关键字以满足您的需求……</p> 

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/

于 2013-01-02T11:33:39.900 回答
0

使用 aoutline而不是 aborder并删除填充。

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

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

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

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

于 2013-01-02T10:43:23.487 回答
0

您可以通过添加padding到td

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

演示

于 2013-01-02T10:56:52.760 回答