圆桌角落答案

【问题标题】：Round table corners圆桌角落
【发布时间】：2015-11-05 20:26:25
【问题描述】：

你能帮我把桌角弄圆吗？我试过简单的border-radius，但这只是在角落分割边框。这是由我的浏览器（Firefox）还是它的错误引起的？ Jsfiddle - http://jsfiddle.net/vuys8eef/

【问题讨论】：

您的问题可以在这里Rounded Table Corners CSS Only得到解答
Rounded table corners CSS only的可能重复

【解决方案1】：

您需要对表格中第一行和最后一行的第一列和最后一列进行圆角处理。

类似这样的：

table tr:first-child th:first-child {
    border-top-left-radius: 10px;
}


table tr:first-child th:last-child {
    border-top-right-radius: 10px;
}

table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

你可以看到你更新的fiddle

【讨论】：

border-radius 的前缀不是必需的。
只是在照顾你，没有人有时间做额外的工作xP
谢谢。这解决了问题。

【解决方案2】：

您将它应用于错误的元素，请改用它。

td, th{
   border-radius: 5px;
}

CODEPEN DEMO

【讨论】：

【解决方案3】：

您好，您的代码很好，但您可以在表格上使用overflow:hidden 来隐藏里面的内容。这是做到这一点的一种方法:)

示例JSFIDDLE

【讨论】：