如何在表格行上添加边框半径

有谁知道如何根据自己的喜好来设计tr？

我在表上使用了border-collapse，在那之后tr可以显示1px的实心边框，我给了它们。

但是，当我尝试过时-moz-border-radius，它不起作用。即使简单的保证金也不起作用。

您只能将边框半径应用于td，不能应用于tr或table。我通过使用以下样式来解决圆角表的问题：

table { border-collapse: separate; }
td { border: solid 1px #000; }
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; }

确保提供所有供应商前缀。这是一个实际的例子。

行之间的实际间距

这是一个旧线程，但是我注意到阅读了OP关于其他答案的评论，这些答案最初的目标显然border-radius是行和行之间的间隙。似乎当前的解决方案并不能完全做到这一点。theazureshadow的答案朝着正确的方向发展，但似乎还需要更多。

对于那些对此感兴趣的人，这里有一个提琴，它确实将行分开并将半径应用于每行。（注意：Firefox当前background-color在边界半径处显示/剪切存在一个错误。）

代码如下（并且如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; 
}

奖励信息：border-radius对在上border-collapse: collapse;设置了，并设置了边框的表格无效td。它并不重要，如果border-radius设置上table，tr或td-IT参数被忽略。

http://jsfiddle.net/Exe3g/

tr元素确实遵守边框半径。可以使用纯HTML和CSS，而不使用JavaScript。

JSFiddle链接：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>

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

而是可以给第一个TD的两个左手角和最后一个TD的两个右手角指定边界半径。您可以按照theazureshadow的建议使用first-child和last-child选择器，但是较旧版本的IE可能无法很好地支持它们。仅定义类（例如.first-column和.last-column达到此目的）可能会更容易。

根据Opera的规范，CSS3标准未定义border-radiusTD 的使用。我的经验是Firefox和Chrome支持它，但是Opera不支持（不了解IE）。解决方法是将td内容包装在div中，然后将其border-radius应用于div。

没有在这里尝试任何功劳，所有功劳都归@theazureshadow来他的答复，但是我个人不得不将其改编为具有某些内容<th>而不是<td>第一行单元格的表。

我只是在这里发布修改后的版本，以防万一您想使用@theazureshadow的解决方案，但是像我一样，<th>第一个中有一些<tr>。类“ reportTable”仅必须应用于表本身。

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;
}

随意调整填充物，半径等以适合您的需求。希望对大家有帮助！

我发现，在最新版本的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，只需记得清除它即可。

使用border-collapse：seperate; 和border-spacing：0; 但仅对tds使用border-right和border-bottom，border-top应用于th，border-left仅应用于tr td：nth-​​child（1）。

然后，您可以将边界半径应用于转角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;