如何在表格行上添加边框半径
有没有人知道如何风格tr我们喜欢？
我已经在桌子上使用了border-collapse，在那之后tr可以显示1px的实体边框。
但是，当我尝试过-moz-border-radius ，它不起作用。 即使简单的保证金也行不通。
您只能将边界半径应用于td，而不是tr或表格。 我已经通过使用这些样式绕过这个圆angular表：
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和行之间的差距。 目前的解决scheme似乎并没有完全做到这一点。 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;表没有影响border-collapse: collapse; 和td的边界。 如果border-radius设置在table ，则tr或td -it被忽略。
在这种情况下，我认为崩溃边界是错误的。 折叠它们基本上意味着两个相邻单元之间的边界被共享。 这意味着目前还不清楚它应该向哪个方向给定一个半径。
相反，可以给第一个TD的两个左边angular和最后一个的两个右边的拐angular给边界半径。 您可以使用电子邮件提示的first-child和last-childselect器，但这些select器可能不被旧版本的IE支持。 为了达到这个目的，定义一些类比如.last-column和.last-column可能会更容易一些。
根据Opera的CSS3标准没有定义在TD上使用border-radius 。 我的经验是，Firefox和Chrome支持它，但Opera不（不知道关于IE）。 解决方法是将td内容封装在div中，然后将border-radius应用于div。
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>
我发现在表格，trs和tds中添加边界半径在Chrome，FF和IE的最新版本中似乎不起作用。 我所做的是，我用一个div包装表格，并把边界半径。
<div class="tableWrapper"> <table> <tr><td>Content</td></tr> <table> </div> .tableWrapper { border-radius: 4px; overflow: hidden; }
如果你的表格不是width: 100% ，你可以使你的包装float: left ，只是记得清除它。
所有的功劳都归功于@theazureshadow的答复，但是我个人不得不为它的第一行单元格修改一个<th>而不是<td>的表格。
我只是在这里发布修改后的版本，以防有些人想使用@ theazureshadow的解决scheme，但像我一样，在第一个<tr>有一些<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; }
随意调整填充，半径等，以满足您的需求。 希望帮助别人！
或者如果表格已经崩溃，则使用box-shadow
