表格单元格的背景颜色和圆角

Question

在代码片段http://jsfiddle.net/hXMLF/3/中，你可以看到单元格白色边框和页面背景之间的小边框。如何避免出现这种情况？

HTML：

<table cellspacing="0" cellpadding="0">
  <tr>
      <td>Test</td>
      <td>Test</td>
  </tr>
</table>​

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;
}​

- Nachtgold

Answer 1

我想出了两个解决方案。使用第二个解决方案，但我也保留了第一个解决方案，因为在其他情况下这可能对别人有用。

解决方案1：显示

将 td 的显示方式更改为 inline-block 就可以解决问题，但可能会影响到其他地方的实际内容...

td {
    display: inline-block; /* this has been added */
    border-radius: 5px;
    background-color: #369;
    color: white;
    border: 5px solid white;
}​

以下是解决方案1的JSFiddle更改版本。

解决方案2：背景裁剪（推荐）

但既然您已经在使用CSS3，那么这是一个更好的解决方案：

td {
    background-clip: padding-box; /* this has been added */
    border-radius: 5px;
    background-color: #369;
    color: white;
    border: 5px solid white;
}​

这是您更改后的解决方案2的JSFiddle。

如果它在所有浏览器上都不起作用，您应该知道有特定于浏览器的设置，例如-moz-background-clip和-webkit-background-clip，它们使用不同的值集（它们基本上省略了box中的 border-box、padding-box和content-box）。

- Robert Koritnik

---

方案2非常完美，所以忘记方案1吧。 - thirtydot

如果我移除顶部（或底部）边框，padding-box 仅修复了部分剪切错误 :( http://jsfiddle.net/hXMLF/12/ - Nachtgold

@thirtydot：我知道。我编辑了我的答案，建议使用第二个，并保留第一个出于历史原因。 - Robert Koritnik

@Nachtgold: 使用 content-box 替代，这将仅限制背景到内容。我已经测试过它可以消除故障。但你可能会看到略微不同的“内边框圆角度”，这也许是更正确的边框圆角度。 - Robert Koritnik

当使用圆角和盒阴影组合时，它在Firefox中的效果并不是很好 - 至少背景颜色会透过一点。 - acme

Answer 2

这是因为

border-collapse: separate;

这样做就可以了。表格在样式方面并不是特别突出，我建议您尝试使用<div>标签。

试试这个：http://jsfiddle.net/hXMLF/9/

- JDuarteDJ

Answer 3

请查看此链接。您可以生成用于圆角单元格的CSS。

http://cssround.com/

例子：

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

- ARIJIT

---

我对使用div元素的解决方案不感兴趣，因为这是一个特定于表格元素的问题。 - Nachtgold