Using box-sizing to create an inside border

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