圆形表角只有CSS
我搜索过并搜索过，但未能找到符合我要求的解决方案。
我有一个简单的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
}
但这让我对细胞没有任何边界。如果我添加边框，它们不是圆形的！
任何解决方案？
18 个答案:
答案 0 :(得分：68)
似乎在FF和Chrome（未测试任何其他人）中使用单独的边框正常工作：http://jsfiddle.net/7veZQ/3/
编辑：这是草图的相对干净的实现：
table {
border-collapse:separate;
border:solid black 1px;
border-radius:6px;
-moz-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>
答案 1 :(得分：17)
首先，如果您想支持所有浏览器，则需要的不仅仅是-moz-border-radius。您应该指定所有变体，包括普通border-radius，如下所示：
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
其次，要直接回答您的问题，border-radius实际上并没有显示边框;它只是设置边角的外观（如果有的话）。
要打开边框，从而获得圆角，您还需要border和td元素上的th属性。
td, th {
border:solid black 1px;
}
如果您有背景颜色（或图形），您还会看到圆角，但当然它需要与周围元素的背景颜色不同，以便圆角在没有边框的情况下可见。
值得注意的是，一些较旧的浏览器不喜欢将border-radius放在表/表格单元格上。可能值得在每个单元格中放置一个<div>并将其设置为样式。但是这不应该影响任何浏览器的当前版本（IE除外，它根本不支持圆角 - 见下文）
最后，并非IE根本不支持border-radius（IE9测试版确实如此，但大多数IE用户将使用IE8或更低版本）。如果您想破解IE以支持border-radius，请查看http://css3pie.com/
[编辑]
好的，这让我烦恼，所以我做了一些测试。
Here's a JSFiddle example I've been playing with
表格元素上似乎缺少的是border-collapse:separate;。这会阻止单元格将边框链接在一起，这样就可以获取边框半径。
希望有所帮助。
答案 2 :(得分：17)
对我来说，Twitter Bootstrap Solution看起来不错。它不包括IE＆lt; 9（IE 8及更低版本没有圆角），但那是O.K.我认为，如果你开发了预期的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)
答案 3 :(得分：6)
通过个人的体验，我发现使用纯CSS来围绕HTML表格单元格的角落是不可能的。可以围绕桌子的最外边界。
您必须使用this tutorial中描述的图像，或任何类似的图像：）
答案 4 :(得分：5)
我发现IE和＆lt; 9的圆角和其他CSS3行为的最佳解决方案可以在这里找到：http://css3pie.com/
下载插件，复制到解决方案结构中的目录。然后在样式表中确保使用行为标记，以便它插入插件。
我的项目中的简单示例，它为我的表提供了圆角，颜色渐变和框阴影：
.table-canvas
{
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
overflow:hidden;
border-radius: 10px;
-pie-background: linear-gradient(#ece9d8, #E5ECD8);
box-shadow: #666 0px 2px 3px;
behavior: url(Include/PIE.htc);
overflow: hidden;
}
如果您的Visual Studio CSS intellisense为您提供了未知属性的绿色下划线，请不要担心，它在运行时仍然有效。有些元素的文档记录不是很清楚，但是这些例子非常好，特别是在头版上。
答案 5 :(得分：3)
选择的答案太可怕了。我将通过定位角表单元格并应用相应的边界半径来实现此目的。
要获得顶角，请在 元素的第一个和最后一个类型上设置边框半径，然后通过在 td <的最后一个和第一个上设置边框半径来完成/ strong>键入 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;
}
答案 6 :(得分：1)
要适应@luke flournoy的出色答案-如果您未在表中使用th，那么这里是制作圆桌表所需的所有CSS：
.my_table{
border-collapse: separate;
border-spacing: 0;
border: 1px solid grey;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.my_table tr:first-of-type {
border-top-left-radius: 10px;
}
.my_table tr:first-of-type td:last-of-type {
border-top-right-radius: 10px;
}
.my_table tr:last-of-type td:first-of-type {
border-bottom-left-radius: 10px;
}
.my_table tr:last-of-type td:last-of-type {
border-bottom-right-radius: 10px;
}
答案 7 :(得分：0)
由于没有任何评分较高的解决方案对我有用，因为我正在使用具有交替配色方案的桌子，所以我尝试了很多，最终根据@[luke floornoy] 提供的解决方案得到了我的解决方案。
在表格上放置圆角边框的解决方案基本上是有效的 - 但是当您在表格行上应用背景颜色或使用指定的表格头时，它会覆盖整个表格设置并显示为矩形。< /p>
Luke 的解决方案仅针对特定的角单元格，这让我想到，我也许还应该将交替的背景颜色应用于该行的单元格而不是该行本身。将 td 添加到 tr:nth-child 就成功了。如果您想在桌头上使用第三种颜色，也是如此。您可以在下面的代码片段中查看这一点。
我没有看到任何其他解决方案实际上可以使用背景颜色，尤其是不能在一张桌子中使用不同的颜色，所以我希望这个解决方案可以帮助那些需要的不仅仅是一张普通的单色桌子的人。如果它对你有帮助，就给它评分，这样它就会移动到顶部。这里有很多非常挑剔且不太有用的答案，所以。
看看我的结果https://i.stack.imgur.com/XHOEN.png
这是它的代码：
.LezzonPrize{
text-align: center;
line-height: 1.8rem;
border-collapse: collapse;
border-radius: 36px;
-moz-border-radius: 36px;
-webkit-border-radius: 36px;
background-color: #FCF3C6;
}
.LezzonPrize thead th{
background-color:#FFCF5A;
}
.LezzonPrize thead th:first-child{
border-radius: 36px 0 0 0;
}
.LezzonPrize thead th:last-child{
border-radius: 0 36px 0 0;
}
.LezzonPrize th{
text-align: center;
vertical-align: middle;
line-height: 1.8rem;
font-weight: 700;
text-transform: none;
border-bottom:
2px solid #3F5A1B;
}
.LezzonPrize td:first-child{
text-align:left;
}
.LezzonPrize td{
font-size:18px;
}
.LezzonPrize tr:nth-child(2n-1) td{
background-color: #F3CF87;
}
.LezzonPrize tr:last-child td:first-child{
border-radius: 0 0 0 36px;
-moz-border-radius: 0 0 0 36px;
-webkit-border-radius: 0 0 0 36px;
}
.LezzonPrize tr:last-child td:last-child{
border-radius: 0 0 36px 0;
-moz-border-radius: 0 0 36px 0;
-webkit-border-radius: 0 0 36px 0;
} <table class="LezzonPrize" width="100%">
<thead>
<tr>
<th width="32%">
Head
</th>
<th width="17%">
Head
</th>
<th width="17%">
Head
</th>
<th width="17%">
Head
</th>
<th width="17%">
Head
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
</tr>
<tr>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
</tr>
<tr>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
</tr>
<tr>
<td colspan="5">Try deleting this to confirm that the round corners also work on the 2nth-child table rows</td>
</tr>
</tbody>
</table>答案 8 :(得分：0)
这是css3，只有最近的非IE＆lt; 9浏览器才支持它。
签出here，它派生所有可用浏览器的圆形属性
答案 9 :(得分：0)
这有点粗糙，但这是我整理的东西，完全由CSS和HTML组成。
- 外圆角
- 标题行
- 多个数据行
此示例还为每个数据单元:hover使用<td>伪类。可以轻松更新元素以满足您的需求，并且可以快速禁用悬停。
（但是，我还没有得到:hover才能正常用于完整的行<tr>。最后一个悬停的行底部没有圆角显示。我敢肯定有些东西简单而被忽略。）
table.dltrc {
width: 95%;
border-collapse: separate;
border-spacing: 0px;
border: solid black 2px;
border-radius: 8px;
}
tr.dlheader {
text-align: center;
font-weight: bold;
border-left: solid black 1px;
padding: 2px
}
td.dlheader {
background: #d9d9d9;
text-align: center;
font-weight: bold;
border-left: solid black 1px;
border-radius: 0px;
padding: 2px
}
tr.dlinfo,
td.dlinfo {
text-align: center;
border-left: solid black 1px;
border-top: solid black 1px;
padding: 2px
}
td.dlinfo:first-child,
td.dlheader:first-child {
border-left: none;
}
td.dlheader:first-child {
border-radius: 5px 0 0 0;
}
td.dlheader:last-child {
border-radius: 0 5px 0 0;
}
/*===== hover effects =====*/
/*tr.hover01:hover,
tr.hover02:hover {
background-color: #dde6ee;
}*/
/* === ROW HOVER === */
/*tr.hover02:hover:last-child {
background-color: #dde6ee;
border-radius: 0 0 6px 6px;
}*/
/* === CELL HOVER === */
td.hover01:hover {
background-color: #dde6ee;
}
td.hover02:hover {
background-color: #dde6ee;
}
td.hover02:first-child {
border-radius: 0 0 0 6px;
}
td.hover02:last-child {
border-radius: 0 0 6px 0;
}<body style="background:white">
<br>
<center>
<table class="dltrc" style="background:none">
<tbody>
<tr class="dlheader">
<td class="dlheader">Subject</td>
<td class="dlheader">Title</td>
<td class="dlheader">Format</td>
</tr>
<tr class="dlinfo hover01">
<td class="dlinfo hover01">One</td>
<td class="dlinfo hover01">Two</td>
<td class="dlinfo hover01">Three</td>
</tr>
<tr class="dlinfo hover01">
<td class="dlinfo hover01">Four</td>
<td class="dlinfo hover01">Five</td>
<td class="dlinfo hover01">Six</td>
</tr>
<tr class="dlinfo hover01">
<td class="dlinfo hover01">Seven</td>
<td class="dlinfo hover01">Eight</td>
<td class="dlinfo hover01">Nine</td>
</tr>
<tr class="dlinfo2 hover02">
<td class="dlinfo hover02">Ten</td>
<td class="dlinfo hover01">Eleven</td>
<td class="dlinfo hover02">Twelve</td>
</tr>
</tbody>
</table>
</center>
</body>
答案 10 :(得分：0)
课程......
注意：下面的HTML / CSS代码只能在IE中查看。代码无法在Chrome中正确呈现！
我们需要记住：
-
表格有一个边框：它的外边界（也可以有一个边框半径。）
-
单元格本身也有边框（也可以有边框半径。）
-
表格和单元格边框可能互相干扰：
单元格边框可以穿透表格边框（即：表格边界）。
要查看此效果，请按以下方式修改以下代码中的CSS样式规则：
一世。 table {border-collapse：separate;}
II。删除围绕表格角落单元格的样式规则 III。然后使用边框间距播放，以便您可以看到干扰。 -
但是，表边框和单元格边框可以是COLLAPSED（使用：border-collapse：collapse;）。
-
当它们折叠时，单元格和表格边框会以不同的方式干扰：
我。如果表格边框是圆角但单元格边框保持方形，则单元格的形状优先，表格失去其弯曲的角落。
II。相反，如果角单元是弯曲的但是表边界是方形的，那么你会看到一个丑角的方角与角单元的曲率相邻。
-
鉴于单元格的属性优先，那么围绕表格的四个角落的方式是：
我。折叠桌面上的边框（使用：border-collapse：collapse;）。
II。在桌子的角落单元上设置所需的曲率 III。表格的角是否为圆形无关紧要（即：其边界半径可以为零）。
.zui-table-rounded {
border: 2px solid blue;
/*border-radius: 20px;*/
border-collapse: collapse;
border-spacing: 0px;
}
.zui-table-rounded thead th:first-child {
border-radius: 30px 0 0 0;
}
.zui-table-rounded thead th:last-child {
border-radius: 0 10px 0 0;
}
.zui-table-rounded tbody tr:last-child td:first-child {
border-radius: 0 0 0 10px;
}
.zui-table-rounded tbody tr:last-child td:last-child {
border-radius: 0 0 10px 0;
}
.zui-table-rounded thead th {
background-color: #CFAD70;
}
.zui-table-rounded tbody td {
border-top: solid 1px #957030;
background-color: #EED592;
} <table class="zui-table-rounded">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>DeMarcus Cousins</td>
<td>C</td>
<td>6'11"</td>
<td>08-13-1990</td>
<td>$4,917,000</td>
</tr>
<tr>
<td>Isaiah Thomas</td>
<td>PG</td>
<td>5'9"</td>
<td>02-07-1989</td>
<td>$473,604</td>
</tr>
<tr>
<td>Ben McLemore</td>
<td>SG</td>
<td>6'5"</td>
<td>02-11-1993</td>
<td>$2,895,960</td>
</tr>
<tr>
<td>Marcus Thornton</td>
<td>SG</td>
<td>6'4"</td>
<td>05-05-1987</td>
<td>$7,000,000</td>
</tr>
<tr>
<td>Jason Thompson</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>$3,001,000</td>
</tr>
</tbody>
</table>
答案 11 :(得分：0)
在<head>代码之间添加：
<style>
td {background: #ffddaa; width: 20%;}
</style>
并在身体中：
<div style="background: black; border-radius: 12px;">
<table width="100%" style="cell-spacing: 1px;">
<tr>
<td style="border-top-left-radius: 10px;">
Noordwest
</td>
<td> </td>
<td>Noord</td>
<td> </td>
<td style="border-top-right-radius: 10px;">
Noordoost
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>West</td>
<td> </td>
<td>Centrum</td>
<td> </td>
<td>Oost</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="border-bottom-left-radius: 10px;">
Zuidwest
</td>
<td> </td>
<td>Zuid</td>
<td> </td>
<td style="border-bottom-right-radius: 10px;">
Zuidoost
</td>
</tr>
</table>
</div>
单元格颜色，内容和格式当然是例如;
它是关于在div中间隔颜色填充的单元格。
这样做，黑色单元格边框/表格边框实际上是div背景颜色
请注意，您需要将div-border-radius设置为大于单独的单元格边角半径的2个值，以获得平滑的圆角效果。
答案 12 :(得分：0)
示例HTML
<table class="round-corner" aria-describedby="caption">
<caption id="caption">Table with rounded corners</caption>
<thead>
<tr>
<th scope="col">Head1</th>
<th scope="col">Head2</th>
<th scope="col">Head3</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="rowgroup">tbody1 row1</td>
<td scope="rowgroup">tbody1 row1</td>
<td scope="rowgroup">tbody1 row1</td>
</tr>
<tr>
<td scope="rowgroup">tbody1 row2</td>
<td scope="rowgroup">tbody1 row2</td>
<td scope="rowgroup">tbody1 row2</td>
</tr>
</tbody>
<tbody>
<tr>
<td scope="rowgroup">tbody2 row1</td>
<td scope="rowgroup">tbody2 row1</td>
<td scope="rowgroup">tbody2 row1</td>
</tr>
<tr>
<td scope="rowgroup">tbody2 row2</td>
<td scope="rowgroup">tbody2 row2</td>
<td scope="rowgroup">tbody2 row2</td>
</tr>
</tbody>
<tbody>
<tr>
<td scope="rowgroup">tbody3 row1</td>
<td scope="rowgroup">tbody3 row1</td>
<td scope="rowgroup">tbody3 row1</td>
</tr>
<tr>
<td scope="rowgroup">tbody3 row2</td>
<td scope="rowgroup">tbody3 row2</td>
<td scope="rowgroup">tbody3 row2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td scope="col">Foot</td>
<td scope="col">Foot</td>
<td scope="col">Foot</td>
</tr>
</tfoot>
</table>
SCSS，轻松转换为CSS，使用sassmeister.com
// General CSS
table,
th,
td {
border: 1px solid #000;
padding: 8px 12px;
}
.round-corner {
border-collapse: collapse;
border-style: hidden;
box-shadow: 0 0 0 1px #000; // fake "border"
border-radius: 4px;
// Maybe there's no THEAD after the caption?
caption + tbody {
tr:first-child {
td:first-child,
th:first-child {
border-top-left-radius: 4px;
}
td:last-child,
th:last-child {
border-top-right-radius: 4px;
border-right: none;
}
}
}
tbody:first-child {
tr:first-child {
td:first-child,
th:first-child {
border-top-left-radius: 4px;
}
td:last-child,
th:last-child {
border-top-right-radius: 4px;
border-right: none;
}
}
}
tbody:last-child {
tr:last-child {
td:first-child,
th:first-child {
border-bottom-left-radius: 4px;
}
td:last-child,
th:last-child {
border-bottom-right-radius: 4px;
border-right: none;
}
}
}
thead {
tr:last-child {
td:first-child,
th:first-child {
border-top-left-radius: 4px;
}
td:last-child,
th:last-child {
border-top-right-radius: 4px;
border-right: none;
}
}
}
tfoot {
tr:last-child {
td:first-child,
th:first-child {
border-bottom-left-radius: 4px;
}
td:last-child,
th:last-child {
border-bottom-right-radius: 4px;
border-right: none;
}
}
}
// Reset tables inside table
table tr th,
table tr td {
border-radius: 0;
}
}
答案 13 :(得分：0)
如果您希望桌子两侧的圆角不触及单元格，可以尝试此操作：http://jsfiddle.net/7veZQ/3983/
\b答案 14 :(得分：0)
对于有边界且可滚动的表，使用此（替换变量，$起始文本）
如果您使用thead，tfoot或th，只需将tr:first-child和tr-last-child以及td替换为它们。
#table-wrap {
border: $border solid $color-border;
border-radius: $border-radius;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
table td { border: $border solid $color-border; }
table td:first-child { border-left: none; }
table td:last-child { border-right: none; }
table tr:first-child td { border-top: none; }
table tr:last-child td { border-bottom: none; }
table tr:first-child td:first-child { border-top-left-radius: $border-radius; }
table tr:first-child td:last-child { border-top-right-radius: $border-radius; }
table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; }
table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }
HTML：
<div id=table-wrap>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>
答案 15 :(得分：0)
以下是我在浏览器中使用的一些内容，因此我希望它能在将来帮助某人：
#contentblock th:first-child {
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
border-radius: 6px 0 0 0;
behavior: url(/images/border-radius.htc);
border-radius: 6px 0 0 0;
}
#contentblock th:last-child {
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
border-radius: 0 6px 0 0;
behavior: url(/images/border-radius.htc);
border-radius: 0 6px 0 0;
}
#contentblock tr:last-child td:last-child {
border-radius: 0 0 6px 0;
-moz-border-radius: 0 0 6px 0;
-webkit-border-radius: 0 0 6px 0;
behavior: url(/images/border-radius.htc);
border-radius: 0 0 6px 0;
}
#contentblock tr:last-child td:first-child {
-moz-border-radius: 0 0 0 6px;
-webkit-border-radius: 0 0 0 6px;
border-radius: 0 0 0 6px;
behavior: url(/images/border-radius.htc);
border-radius: 0 0 0 6px;
}
显然，#contentblock部分可以根据需要进行替换/编辑，您可以通过在Google或您喜欢的网络浏览器中进行搜索来找到border-radius.htc文件。
答案 16 :(得分：-1)
在表格周围添加<div>包装，并应用以下CSS
border-radius: x px;
overflow: hidden;
display: inline-block;
到这个包装器。
答案 17 :(得分：-1)
CSS：
table {
border: 1px solid black;
border-radius: 10px;
border-collapse: collapse;
overflow: hidden;
}
td {
padding: 0.5em 1em;
border: 1px solid black;
}
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？