圆 table 角

Question

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

Answer 1

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

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

CODEPEN DEMO

Answer 2

您需要为 table 中第一行和最后一行的第一列和最后一列圆角。

像这样：

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

Answer 3

您好，您的代码很好，但您可以在 table 上使用 overflow:hidden 来隐藏其中的内容。这是一种方法:)

示例JSFIDDLE

圆 table 角

Round table corners

html

css

css-tables