使用box-sizing创建内部边框

Question

我想创建一个HTML表格,其中每个单元格都是可单击的,单击单元格会div在单元格中为单个单元格添加边框.我希望这个div边界完全存在于td包含它的现有范围内,而根本不调整表格或其单元格的大小.我似乎无法使这种情况正确发生.

这个上一个问题似乎解决了同样的问题,并指出了一些关于box-sizing CSS选项的文章.我有一个小提琴,我试图实现这个没有成功: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>

这是目前发生的事情.边界导致包含td增长以容纳div边界.

如何在不影响包含表的情况下将边框添加到div？

Answer 1

看看我的JSFiddle。

您需要为单元格提供宽度/高度：

td {
    // ...
    width:33.3%;
    height:33.3%;
}