圆角仅适用于CSS
圆角仅适用于CSS
提问于 2011-02-08 18:58:03
我已经找了又找，但还没能找到我的需求的解决方案。
我有一个普通的旧HTML表。我希望它的圆角，没有使用图像或JS的，即纯CSS只有。如下所示：
角单元格为圆角，单元格为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
}但这让我没有任何细胞的边界。如果我添加边框，它们不是圆角的！
有什么解决方案吗？
回答 20
Stack Overflow用户
回答已采纳
发布于 2011-02-08 19:12:22
在FF和Chrome (还没有测试过任何其他浏览器)中似乎工作得很好，有独立的边框：http://jsfiddle.net/7veZQ/3/
编辑:这里是你的草图的一个相对干净的实现：
table {
border-collapse:separate;
border:solid black 1px;
border-radius:6px;
}
td, th {
border-left:solid black 1px;
border-top:solid black 1px;
}
th {
background-color: blue;
border-top: none;
}
td:first-child, th:first-child {
border-left: none;
}<table>
<thead>
<tr>
<th>blah</th>
<th>fwee</th>
<th>spoon</th>
</tr>
</thead>
<tr>
<td>blah</td>
<td>fwee</td>
<td>spoon</td>
</tr>
<tr>
<td>blah</td>
<td>fwee</td>
<td>spoon</td>
</tr>
</table>
Stack Overflow用户
发布于 2012-06-30 17:36:58
对我来说，Twitter Bootstrap Solution看起来不错。它排除了IE <9(在IE 8和更低版本中没有圆角)，但我认为，如果你开发未来的Web应用程序，这是可以的。
CSS/HTML:
table {
border: 1px solid #ddd;
border-collapse: separate;
border-left: 0;
border-radius: 4px;
border-spacing: 0px;
}
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
border-collapse: separate;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
th, td {
padding: 5px 4px 6px 4px;
text-align: left;
vertical-align: top;
border-left: 1px solid #ddd;
}
td {
border-top: 1px solid #ddd;
}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
border-radius: 4px 0 0 0;
}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
border-radius: 0 0 0 4px;
}<table>
<thead>
<tr><th>xxx</th><th>xxx</th><th>xxx</th></tr>
</thead>
<tbody>
<tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
<tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
<tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
<tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
<tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
</tbody>
</table>
你可以玩那个here (on jsFiddle)
Stack Overflow用户
发布于 2017-11-16 06:28:34
选择的答案很糟糕。我将通过对准角点表格单元并应用相应的边框半径来实现这一点。
要获得上角，请在th类型的第一个和最后一个元素上设置边界半径，然后在最后一个类型的td元素上设置边界半径，在最后一个tr类型上设置边界半径以获得下角。
th:first-of-type {
border-top-left-radius: 10px;
}
th:last-of-type {
border-top-right-radius: 10px;
}
tr:last-of-type td:first-of-type {
border-bottom-left-radius: 10px;
}
tr:last-of-type td:last-of-type {
border-bottom-right-radius: 10px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4932181
复制相关文章
相似问题