How can I create a bold/"cursor" border around a table cell?

Question

I need a cursor that I can move between two cells in a table. Here is the jsFiddle: http://jsfiddle.net/KNc5u/

If you click on the table, the cursor will cycle between selecting the whole cell, selecting the bottom of the cell and the top.

As you can see, the table "jumps" while the cursor moves because the border width changes. This is ugly. How can I prevent this?

Constraints:

• Cursor must be 2 pixel wide (not 1 and not 3)
• Pure CSS preferred
• No additional HTML elements, please (I could do this easily by wrapping each cell with a div with a 1 pixel white border that I turn black but I'm looking for a solution that doesn't add junk to the DOM)
• CSS3 is OK
• I can live with IE10+ :-)

Answer 1

As you said you're ok with css3 you can fiddle with box-shadow: http://jsfiddle.net/KNc5u/10/

This example works only with modern browsers and does not using any vendor prefixes like -moz or -webkit. If you need support other browsers you can easily add these prefixes to the existing box-shadow properties.

Feel free to change the color keywords to your needs…

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;
}

Update

Here is a updated version (imho to hacky): http://jsfiddle.net/KNc5u/13/

However it should fixe your issues for the provided markup. Note that there is a hint: This example will only work in a proper way with similar colors for td and your selected, selBottom and selTop classes.

Update 2

Now with left and right support: http://jsfiddle.net/KNc5u/15/