如何在表格單元格周圍創建粗體/“光標”邊框？

Question

我需要一個游標，可以在表中的兩個單元格之間移動。 這是jsFiddle： http : //jsfiddle.net/KNc5u/

如果單擊表，光標將在選擇整個單元格，選擇單元格的底部和頂部之間循環。

如您所見，由於邊界寬度的變化，表格在光標移動時“跳轉”。 這很丑。 我該如何預防？

限制條件：

• 游標必須為2像素寬（不是1也不是3）
• 首選純CSS
• 請不要添加其他HTML元素（我可以通過用div包裹每個單元格來輕松做到這一點，該div變成黑色，但我會變成黑色，但我正在尋找一種不會向DOM添加垃圾的解決方案）
• CSS3還可以
• 我可以使用IE10 + ：-)

Answer 1

正如您所說的，您對CSS3沒問題，您可以擺弄盒子陰影： http : //jsfiddle.net/KNc5u/10/

該示例僅適用於現代瀏覽器，並且不使用任何供應商前綴，例如-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;
}

更新資料

這是更新的版本（恕我直言為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

您可以通過在td添加padding來減少表格的移動

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

演示