为什么td border-radius应用于内容而不是边框

Question

我尝试将border-radius应用于table data（td）元素并在其周围有一个边框。但只有内部内容具有圆角，边框保持矩形。这是一个jsfiddle示例：http://jsfiddle.net/pm9qhkt3/

Stangely足够相同的代码 WORK 内置stackoverflow内联工具，见下文：

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

StackOverflow的：

Answer 1

在jsfiddle中，他们使用了normalize.css，其中表具有属性

table{
border-collapse: collapse;
}

在inspect元素中取消选中，然后看..它与内联stackoverflow工具一样。

Answer 2

您不允许边框彼此分开。

您有border-collapse: collapse作为您通过JSFiddle获得的CSS的一部分。告诉浏览器的是这些边框必须触摸。显然，你并不是那么想要的。

因此，如果您将此添加到CSS中，它将解决它：

table {
  border-collapse: separate;
}

你可能希望以比我在那里提供的更具特异性的目标来确定目标，但这是一般的想法。如果您要对表格单元格的边框进行四舍五入，请允许它们彼此分开。

Link to JSFiddle example

当然，不同的浏览器和解释器会对其表有不同的样式规则（就像它们对p blockquote和其他元素一样）。因此，在某些情况下，当默认border-collapse属性为separate时，它会立即开箱即用。我不知道现代IE是否仍然将其作为默认设置，但我知道IE 6-8确实如此。仅作为示例。

Answer 3

尝试这个。

＆＃13;

＆＃13;

.border {
  padding: 10px;
  border-color: red;
  border: 1px solid green;
  border-radius: 20px;
  background-color: silver;
}
table{
  border-collapse: collapse;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

.border {
  padding: 10px;
  border-color: red;
  border: 1px solid green;
  border-radius: 20px;
  background-color: silver;
}

table {
  border-collapse: inherit
}

试试这个，它的作品

Answer 5

table {width: 100%;
   border-collapse: separate !important;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
}