将边框应用于保留在TD尺寸内的TD

Question

在日历应用程序中，我使用以下（略微简化的）样式突出显示html表格中当前选定的表格单元格：

border:solid 2px black;

问题是，这会扩展到表格单元格之外，从而扩展包含行，如下图所示：

未选

选择

是否有一种CSS方法可以强制边界进入＆＃34;留在内部＆＃34;表格单元格，而不是展开包含行？

Answer 1

与box-sizing：

一起

box-sizing: border-box;

强制浏览器将border（和padding）的宽度合并到声明的宽度内，还有box-shadow的潜在用途：

box-shadow: inset 0 0 0 2px #000;

虽然不幸的是，虽然这会产生一个伪边框，但它只能是一个坚固的边界。

Answer 2

USe

box-sizing: border-box;

这样你的边界就不会跨越其他细胞

Answer 3

html {
  box-sizing:border-box
}
*,*:before,*:after {
  box-sizing: inherit
}

我在样式表的顶部使用它。第一个将整个文档的box-sizing属性设置为border-box，在设置元素高度和宽度时会考虑任何填充和边框。如果没有这个，默认的盒子模型适用于元素首先获得高度和宽度，然后填充，然后是边框。

第二行有助于您使用其他人可能已将box-sizing设置为其他内容的组件或代码。这意味着对于那些代码片段，他们会保留box-sizing。继承意味着一旦包含元素关闭，下一个元素将继承备份DOM，最终取border-box。

克里斯·科伊尔（Chris Coyier）在2014年inheriting box-sizing做了一篇很好的文章，详细介绍了一些内容。