使用框大小创建一个内部边框

我想要创建一个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的边框。

I want the red border to appear without resizing the td

我怎样才能边框添加到div又不影响含有表？

来源

2013-08-26 Chris Farmer

你能不能简单地将边框添加到'.unselected'类（即'.unselected {边界：2px的固体黄色;}'因为我没有把作为答案。它不会真的回答你的问题，只是提供了一个黑客解决方案。 – kunalbhat

嗯，我会试图使用jQuery来调整单击功能的单元格大小，虽然这也可能被认为是黑客...尽管@ kunalbhat答案将是一个更加优雅的解决方案，并且非常简单：http://jsfiddle.net/YsAGh/4/ – ChrisW

这不会解决问题，但重要的是将前缀规则放在最后e.g.' * { - WebKit的盒大小：边界盒; -moz-箱尺寸：边界盒;箱尺寸：边界盒;}'。这样，浏览器将首先尝试使用正确/完成的前缀，然后如果未实现，则回退到前缀/开发版本。 – tw16

看看我的JSFiddle。

您需要提供一个宽/高到你的细胞：

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

来源

2013-08-26 22:38:36 glautrou

如何使用插图的box-shadow？

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

来源

2013-08-26 22:39:48 gvee

要小心，这个属性在[不兼容IE8]（http://caniuse.com/css-boxshadow）（和Windows XP） – glautrou

ie8当然不值得兼容，更别提任何花哨的东西 – iConnor

幸运的是这是一个in应用程序，我们可以假设IE9 +或最新的Firefox或Chrome。 –

OK，因为我已经看到了我的意见的回应，在这里一些支持它作为一个答案:)

底胶加入了黄色“隐藏”的边界到.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.

来源

2013-08-26 22:47:32 kunalbhat

使用table-layout来固定单元格的宽度，并在selected中使用小号padding来防止增加高度。

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

见JSFiddle

来源

2013-08-26 22:54:29 hallaji

使用框大小创建一个内部边框

回答

相关问题