Using box-sizing to create an inside border - html

Question

I want to create an HTML table where each cell is clickable, and clicking on a cell adds a border to the single div within the cell. I want that div's border to exist entirely within the existing confines of the td that contains it, without resizing the table or its cells at all. I can't seem to make this happen correctly.
This previous question seems to address the same issue and points to some articles about the box-sizing CSS options. I have a fiddle where I tried to implement this without success: http://jsfiddle.net/YsAGh/3/.
* {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
<table>
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
</tr>
....
</table>
Here's what currently happens. The border causes the containing td to grow to accommodate the div's border.
How can I add the border to the div without it affecting the containing table?

Answer 1

Look at my JSFiddle.
You need to provide a width/height to your cells:
td {
// ...
width:33.3%;
height:33.3%;
}

Answer 2

How about using an inset box-shadow?
.selected {
box-shadow: inset 0px 0px 0px 2px red;
}

Answer 3

OK, since I've seen a some support for my response in the comments, here it as an answer :)
Presize your cell by adding a yellow 'hidden' border to the .unselected state:
CSS
.unselected {
background-color: yellow;
border: 2px solid yellow; // Presize with this yellow border
}
div {
..
line-height: 1; // Add line-height to regulate size (optional)
}
Codepen example.

Answer 4

Using table-layout to fix the width of cells and small padding in selected to prevent increasing height.
table {
table-layout: fixed;
}
.selected {
padding: 1px;
}
See JSFiddle