带圆角和边框的表头

Question

表头是否可以拥有圆角和1像素边框？

当我为 th 元素应用边框时，边框的角是方形而不是圆形。

table {
  border-collapse: collapse;
}

th {
  background: cyan;
  border: 1px solid;
}

th:first-child {
  border-radius: 10px 0 0 0;
}

th:last-child {
  border-radius: 0 10px 0 0;
}

td {
  border: 1px solid;
}

<table>
  <tr><th>Col 1</th><th>Col 2</th></tr>
  <tr><td>a</td><td>b</td></tr>
  <tr><td>c</td><td>d</td></tr>
</table>

- user1438243

---

我的解决方案是在单元格中添加span或div。 - Denys Séguret

请提供需要翻译的具体内容。 - Huangism

请不要忘记接受答案，这是对他人的基本礼貌。 - Nikola Bogdanović

Answer 1

这将使得所有表头（如果您使用语义化的th单元格而不是正文td单元格）具有圆角，但如果您只希望应用于选定的表格 - 那么将类名称更改为table.rounded th并将rounded类添加到这些表格中：

th { 
    -khtml-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -ms-border-radius: 4px 4px 4px 4px;
    -o-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    border: solid 1px black;
}

编辑：为实现此功能，您需要在表格上添加border-collapse: separate;...

- Nikola Bogdanović

---

这就是我现在拥有的，它正在创建方形边角... - user1438243

@user1438243，你的表格本身不能有任何边框，并在浏览器开发者工具中检查是否应用了计算样式（可能有其他样式覆盖了它）？同时提供一个 jsfiddle 示例会更好...哦，还有，你的浏览器是否支持圆角表格？ - Nikola Bogdanović

@user1438243，请检查编辑，它被假定了 - 但你可能错过了这一点。 - Nikola Bogdanović

Answer 2

在每个中添加

包装器，将边框样式添加到包装器中。

table {
  border-collapse: collapse;
}

th {
  padding: 0;
}

th div {
  background: cyan;
  border: 1px solid;
  width: 80px;
}

th:first-child div {
  border-radius: 10px 0 0 0;
}

th:last-child div {
  border-radius: 0 10px 0 0;
}

<table>
  <tr>
    <th><div>Col 1</div></th>
    <th><div>Col 2</div></th>
    <th><div>Col 3</div></th>
    <th><div>Col 4</div></th>
  </tr>
</table>

- Brad

---

那可能会起作用，我只是在寻找最直接和最少hacky的方法来做到这一点。最好不要有额外的HTML。 - user1438243

Answer 3

您可以使用box-shadow来模拟边框：

box-shadow: 0px 0px 2px #ddd inset;

不可否认，这会导致比普通边框更亮的颜色，因此您需要进行相应的补偿。

- Kao