【发布时间】：2011-06-23 08:42:11
【问题描述】：
我已经搜索和搜索，但无法找到满足我要求的解决方案。
我有一个普通的 HTML 表格。我想要圆角，不使用图像或 JS，即纯 CSS only。像这样：
圆角用于角单元格，1px 用于单元格的粗边框。
到目前为止，我有这个：
table {
-moz-border-radius: 5px !important;
border-collapse: collapse !important;
border: none !important;
}
table th,
table td {
border: none !important
}
table th:first-child {
-moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
-moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
-moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
-moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
background-color: #ddd !important
}
但这让我的单元格没有任何边界。如果我添加边框，它们就不是圆角的！
有什么解决办法吗？
【问题讨论】：
-
您是否尝试过使用 moz-border-radius 为 TD 元素添加边框？另外，请注意，这在 IE 中不起作用，IE 仍会显示直边。
-
看着答案和你的 cmets，不清楚你想要什么：你想要圆角在哪里？表格，表格单元格，只有表格角落的单元格？
-
我想这从问题标题中很明显，table corners
-
@VishalShah +1 提出了一个非常有用的问题。我盲目地使用为 UI 小部件设计的 jQuery UI 圆角类，但我将它应用到表格元素并且一切都变成了方形。所以现在我仍然可以将我的 jQuery UI 主题与基于表格的小部件一起使用。
标签： html css html-table rounded-corners