如何添加表格行的边界半径

有人知道怎么按我们喜欢的样式设计吗？

我在表格上使用了边框折叠，在 tr 可以显示1px 的实心边框之后，我给它们。

然而，当我尝试 -moz-border-radius，它不工作。即使简单的边距不工作。

262257 次浏览
小开
最佳答案

只能对 td 应用 border- 半径，而不能应用 tr 或 table。我已经通过使用这些样式来解决圆角桌的这个问题:

table {
border-collapse: separate;
border-spacing: 0;
}


td {
border: solid 1px #000;
border-style: none solid solid none;
padding: 10px;
}


tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }


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


tr:first-child td { border-top-style: solid; }
tr td:first-child { border-left-style: solid; }
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>

一定要提供所有的供应商前缀。您也可以在 JSFiddle上看到它的作用。

小开

我认为在这种情况下，摧毁你们的边界是错误的。折叠它们基本上意味着两个相邻单元格之间的边界共享。这意味着在给定半径的情况下，不清楚它应该向哪个方向弯曲。

相反，您可以给出第一个 TD 的左边角和最后一个 TD 的右边角的边界半径。你可以像 theazuresshadow 建议的那样使用 first-child和 last-child选择器，但是这些选择器在旧版本的 IE 中可能很难得到支持。只定义类(如 .first-column和 .last-column)可能更容易实现这一目的。

小开

附加信息: border-radius对 border-collapse: collapse;表没有影响，边框设置在 td表上。无论 border-radius设置在 table、 tr还是 td，都会被忽略。

Http://jsfiddle.net/exe3g/

小开

根据 歌剧，CSS3标准没有定义在 TD 上使用 border-radius。我的经验是 Firefox 和 Chrome 支持它，但 Opera 不支持(不知道 IE)。解决方法是将 td 内容封装在一个 div 中，然后将 border-radius应用于该 div。

小开

行之间的实际间距

这是一个老线程，但我注意到阅读从 OP 的其他答案的意见，原来的目标是显然有 border-radius的行，空白 中间的行。目前的解决方案似乎并没有做到这一点。“蓝影”的答案是正确的，但似乎还需要更多。

对于那些感兴趣的，这里有一个小提琴，它可以分隔行，并将半径应用于每一行。(注意: Firefox 目前在边界半径显示/剪切 background-color时有一个 bug。)

代码如下(正如 theazureshadow 指出的，对于早期的浏览器支持，需要添加 border-radius的各种供应商前缀)。

table {
border-collapse: separate;
border-spacing: 0 10px;
margin-top: -10px; /* correct offset on first border spacing if desired */
}
td {
border: solid 1px #000;
border-style: solid none;
padding: 10px;
background-color: cyan;
}
td:first-child {
border-left-style: solid;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
td:last-child {
border-right-style: solid;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
小开

我发现，在最新版本的 Chrome、 FF 和 IE 中，给表、 trs 和 tds 添加边框半径似乎不能100% 起作用。我所做的是，用 div 包装表，并在其上加上边界半径。

<div class="tableWrapper">
<table>
<tr><td>Content</td></tr>
<table>
</div>


.tableWrapper {
border-radius: 4px;
overflow: hidden;
}

如果您的表不是 width: 100%，您可以使您的包装器 float: left，只要记得清除它。

小开

Tr 元素的确遵循了 border- 半径。可以使用纯 HTML 和 css，没有 javascript。

链接: http://jsfiddle.net/pflies/zL08hqp1/10/

tr {
border: 0;
display: block;
margin: 5px;
}
.solid {
border: 2px red solid;
border-radius: 10px;
}
.dotted {
border: 2px green dotted;
border-radius: 10px;
}
.dashed {
border: 2px blue dashed;
border-radius: 10px;
}


td {
padding: 5px;
}
<table>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
</tr>
<tr class='dotted'>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr class='solid'>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr class='dotted'>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr class='dashed'>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
</table>

小开

我不想在这里得到任何积分，所有的积分都归功于@theazuresshadow，因为他的回复，但是我个人不得不把它改编成一个有一些 <th>的表格，而不是 <td>，因为它的第一行的单元格。

我只是在这里张贴修改后的版本，以防有些人想使用@theazuresshadow 的解决方案，但像我一样，有一些 <th>在第一个 <tr>。“ reportTable”类只需要应用于表本身 f:

table.reportTable {
border-collapse: separate;
border-spacing: 0;
}


table.reportTable td {
border: solid gray 1px;
border-style: solid none none solid;
padding: 10px;
}


table.reportTable td:last-child {
border-right: solid gray 1px;
}


table.reportTable tr:last-child td{
border-bottom: solid gray 1px;
}


table.reportTable th{
border: solid gray 1px;
border-style: solid none none solid;
padding: 10px;
}


table.reportTable th:last-child{
border-right: solid gray 1px;
border-top-right-radius: 10px;
}


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


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


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

请随意调整填料，半径等，以适应您的需要。希望对人们有所帮助！

小开

如果表有折叠，则使用盒子阴影

小开

对 tds 使用 orders- 折叠: seperate; 而邊-space: 0; 但是对 tds 只使用 orders-right 和 orders-bottom，对 th 使用 edge-top，对 tr td: nth-child (1)使用 orders-left。

然后可以将边界半径应用到角 tds (使用 nth-child 查找它们)

Https://jsfiddle.net/j4wm1f29/

<table>
<tr>
<th>title 1</th>
<th>title 2</th>
<th>title 3</th>
</tr>
<tr>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
<tr>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
<tr>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
<tr>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
</table>

table {
border-collapse: seperate;
border-spacing: 0;
}


tr th,
tr td {
padding: 20px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}


tr th {
border-top: 1px solid #000;
}


tr td:nth-child(1),
tr th:nth-child(1) {
border-left: 1px solid #000;
}


/* border radius */
tr th:nth-child(1) {
border-radius: 10px 0 0 0;
}


tr th:nth-last-child(1) {
border-radius: 0 10px 0 0;
}


tr:nth-last-child(1) td:nth-child(1) {
border-radius: 0 0 0 10px;
}


tr:nth-last-child(1) td:nth-last-child(1) {
border-radius: 0 0 10px 0;
}
小开

所有的答案都太长了。最简单的方法添加边界半径的表元素，接受边界作为一个属性，是边界半径溢出: 隐藏。

border: xStyle xColor xSize;
border-collapse: collapse;
border-radius: 1em;
overflow: hidden;
小开

我建议你少用点, 将.css 文件改为.less 并使用以下代码:

table {
border-collapse: separate;
border-spacing: 0;
}
td {
border: solid 1px #000;
border-style: none solid solid none;
padding: 10px;
}
tr td:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
tr td:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
tr td {
border-top-style: solid;
}
tr td:first-child {
border-left-style: solid;
}


tr{
cursor: pointer;
}


tr:hover{
td{
background-color: red;
}
}
小开

下面是一个在单行上放置半径边框的例子:

table { border-collapse: separate; border-spacing: 0; }


td { padding: 5px; }


.rowBorderStart {
border: 1px solid #000;
border-right: 0px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}


.rowBorderMiddle {
border: 1px solid #000;
border-left: 0px;
border-right: 0px;
}


.rowBorderEnd {
border: 1px solid #000;
border-left: 0px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
<table>
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr><td class='rowBorderStart'>2.1</td><td class='rowBorderMiddle'>2.2</td><td class='rowBorderEnd'>2.3</td></tr>
<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
</table>

小开

CSS:

tr:first-child th:first-child {
border-top-left-radius: 70px;
border-bottom-left-radius: 70px;
}


tr:first-child th:last-child {
border-top-right-radius: 70px;
border-bottom-right-radius: 70px;
}
小开

你也可以使用大纲:

table {
border-radius: 10px;
outline: 1px solid gray;
}
小开

根据@Craigo 的回答，我做了一些小小的改动，看一下:)

      table {
border-collapse: separate;
border-spacing: 0 16px;
}


tr td {
border: 1px solid transparent;
transition: all ease 0.3s;
padding: 5px;
}


tr td:first-child {
border-right: 0px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}


tr td:last-child {
border-left: 0px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}


tr td:not(:first-child, :last-child) {
border-left: 0px;
border-right: 0px;
}


tr:hover td:first-child {
border-color: black;
border-right: 0px;
}


tr:hover td:last-child {
border-color: black;
border-left: 0px;
}


tr:hover td:not(:first-child, :last-child) {
border-color: black;
border-left: 0px;
border-right: 0px;
}
<!DOCTYPE html>
<html lang="en">


<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to add border radius on table row</title>
</head>


<body>
<table>
<tbody>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
</tr>
<tr>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</tbody>
</table>
</body>


</html>


提交答案