为什么将td border-radius应用于内容而不是边框
阿列克谢·波利亚科夫（Aleksei Poliakov）
我尝试将边框半径应用于表数据（td）元素，并在其周围具有边框。但是只有内部内容具有圆角，边框保持矩形。这是一个jsfiddle示例：http : //jsfiddle.net/pm9qhkt3/
Stangely足够完全相同的代码没有工作insided计算器在线工具，见下图：
.border {
padding: 10px;
border-color: red;
border: 1px solid green;
border-radius: 20px;
background-color: silver;
}<table>
<tr>
<td class="border">
Caption1
</td>
<td class="border">
<div>1</div>
<div>2</div>
<div>3</div>
</td>
</tr>
<tr>
<td class="border">
Caption2
</td>
<td class="border">
<div>4</div>
<div>5</div>
<div>6</div>
</td>
</tr>
</table>JSFiddle： 
堆栈溢出： 
乔什·伯吉斯（Josh Burgess）
您不允许边界彼此分开。
您已经border-collapse: collapse通过JSFiddle获得了CSS的一部分。告诉浏览器的是这些边界必须接触。显然，您不想要那样。
因此，如果将其添加到CSS中，它将解决该问题：
table {
border-collapse: separate;
}
您可能希望以比我在此处提供的更多的针对性来作为目标，但这是一般的想法。如果要在表格单元格上四舍五入，请让它们彼此分开。
链接到JSFiddle示例
当然，不同的浏览器和解释器对其表将具有不同的样式规则（就像它们对forp blockquote和其他元素所做的一样）。因此，在某些情况下，默认border-collapse属性为时，它将立即可用separate。我不知道现代IE是否仍将其作为默认值，但是我知道IE 6-8确实是一个例子。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
将border-radius应用于box-shadow，但不应用于div本身
- 2
动态将TextBox的BorderBrush应用于Border的BorderBrush
- 3
动态将TextBox的BorderBrush应用于Border的BorderBrush
- 4
将边框应用于InlineShape将应用于它所驻留的表而不是图像
- 5
无法将border-top和border-bottom应用于<tr>标记
- 6
即使使用border-collapse：separate，border-radius也不会应用于<tr>行标记
- 7
将边框应用于图像形状
- 8
将边框应用于图像形状
- 9
如何将 border-bottom 应用于最后一个非空 <tr>？
- 10
为什么-fx-border-color重置TextField的边框半径？
- 11
为什么应用于<td>的样式会覆盖应用于其父<tr>的样式？
- 12
为什么 sudoers NOPASSWD 选项将例外应用于 ROOT 而不是指定用户？
- 13
将前缘边框应用于重复视图，高度可变
- 14
如何仅将表格边框应用于colgroup？
- 15
将1px边框应用于CSS气泡？
- 16
如何将边框应用于 <a> 链接？
- 17
为什么标准禁止将sizeof应用于函数
- 18
为什么将SVD应用于线性回归
- 19
为什么标准禁止将sizeof应用于函数
- 20
为什么将SVD应用于线性回归
- 21
哪个类将应用于 div，为什么？
- 22
IE为什么将不透明度应用于边框样式：点？
- 23
为什么部分遮盖了应用于我的列的边框样式？
- 24
如何让tr border-bottom-bottom而不是td
- 25
为什么将垂直对齐应用于图像也应用于同级文本？
- 26
在框大小：border-box中，内容+填充+边框>宽度会发生什么？
- 27
在框大小：border-box中，内容+填充+边框>宽度会发生什么？
- 28
将边界应用于TD尺寸内的TD
- 29
将vbCrLf应用于文本框的内容
我来说两句