使用box-sizing创建内部边框

Question

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

这个previous question似乎解决了同样的问题，并指出了一些关于大小调整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%;
}

Answer 2

如何使用插入框阴影？

.selected {
    box-shadow: inset 0px 0px 0px 2px red;
}

Answer 3

好的，因为我在评论中看到了对我的回复的一些支持，这里作为答案：）

通过向.unselected状态添加黄色“隐藏”边框来预设您的单元格：

<强> 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

使用table-layout来修正padding中单元格和小selected的宽度，以防止增加高度。

table {
    table-layout: fixed;
}
.selected {
    padding: 1px;
}

参见 JSFiddle