html - 使用 box-sizing 创建内边框

Question

我想创建一个 HTML 表格，其中每个单元格都是可点击的，点击一个单元格会在单元格内的单个 div 上添加一个边框。我希望 div 的边框完全存在于包含它的 td 的现有范围内，根本不需要调整表格或其单元格的大小。我似乎无法让这件事正确发生。

这previous question似乎解决了同样的问题，并指向一些关于 box-sizing CSS 选项的文章。我有一个 fiddle ，我试图实现它但没有成功: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%;
}