Html 表格单元格背景颜色和圆角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13514593/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
table cell background color and round corners
提问by Nachtgold
In the snippet http://jsfiddle.net/hXMLF/3/you see a small border on the corners between the white border of the cells and the page background. How can I prevent it?
在代码段http://jsfiddle.net/hXMLF/3/ 中，您会在单元格的白色边框和页面背景之间的角上看到一个小边框。我该如何预防？
HTML
HTML
<table cellspacing="0" cellpadding="0">
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</table>?
CSS
CSS
body {
background-color: #efefef;
}
table {
margin: 10px;
border-collapse: separate;
border-spacing: 0px;
}
td {
border-radius: 5px;
background-color: #369;
color: white;
border: 5px solid white;
}?
回答by Robert Koritnik
There are two solutions I came up with. Use solution 2but I'm keeping solution 1 here as well because it may come in handy in some other situation to someone else.
我想出了两个解决方案。使用解决方案 2，但我也保留解决方案 1，因为它可能在其他情况下对其他人有用。
Solution 1: Display
解决方案1：显示
Changing tddisplay to inline-blockdoes the trick but may impact your actual content elsewhere...
将td显示更改为inline-block可以解决问题，但可能会影响您在其他地方的实际内容...
td {
display: inline-block; /* this has been added */
border-radius: 5px;
background-color: #369;
color: white;
border: 5px solid white;
}?
Here's your changed JSFiddlefor solution 1.
这是您为解决方案 1更改的 JSFiddle。
Solution 2: Background clip (recommended)
方案二：背景剪辑（推荐）
But since you're using CSS3 anyway this is an even better solution:
但由于您无论如何都在使用 CSS3，因此这是一个更好的解决方案：
td {
background-clip: padding-box; /* this has been added */
border-radius: 5px;
background-color: #369;
color: white;
border: 5px solid white;
}?
Here's your changed JSFiddlefor solution 2.
这是您为解决方案 2更改的 JSFiddle。
If it doesn't work on all browsers, you should be aware that there are browser specific settings as -moz-background-clipand -webkit-background-clipthat use a different set of values (they basically omit boxfrom border-box, padding-boxand content-box)
如果它不适用于所有浏览器，您应该知道有浏览器特定设置 as-moz-background-clip并且-webkit-background-clip使用不同的一组值（它们基本上省略了,和中的框）border-boxpadding-boxcontent-box
回答by JDuarteDJ
This happens because
发生这种情况是因为
border-collapse: separate;
makes it like that. Tables aren't exactly the prima donnaat styling, I recommend You try to use <div>tags instead.
让它像那样。表是不完全的爱慕虚荣的造型，我建议您尝试使用<div>标签来代替。
TRY THIS: http://jsfiddle.net/hXMLF/9/
试试这个：http: //jsfiddle.net/hXMLF/9/
回答by ARIJIT
Check this link. You can generate CSS for round corner cell.
检查此链接。您可以为圆角单元格生成 CSS。
Example:
例子：
<div
style="
width:400px;
height:300px;
-webkit-border-radius: 0px 26px 0px 0px;
-moz-border-radius: 0px 26px 0px 0px;
border-radius: 0px 26px 0px 0px;
background-color:#C2E3BF;
-webkit-box-shadow: #B3B3B3 2px 2px 2px;
-moz-box-shadow: #B3B3B3 2px 2px 2px;
box-shadow: #B3B3B3 2px 2px 2px;
">
Just modify width and height values to get what you need...
</div>
