CSS 如何在表格行上添加边框半径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4094126/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add border radius on table row
提问by Henson
Does anyone know how to style tr as we like?
有谁知道如何设计我们喜欢的 tr 样式？
I've used border-collapse on table, after that tr's can display 1px solid border I give them.
我在桌子上使用了边框折叠，在 tr 可以显示 1px 实心边框之后，我给了它们。
However, when I've tried -moz-border-radius, it doesn't work. Even simple margin doesn't work.
但是，当我尝试过时-moz-border-radius，它不起作用。即使是简单的边距也不起作用。
回答by theazureshadow
You can only apply border-radius to td, not tr or table. I've gotten around this for rounded corner tables by using these styles:
您只能将 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; }
Be sure to provide all the vendor prefixes. Here's an example of it in action.
回答by ScottS
Actual Spacing Between Rows
行之间的实际间距
This is an old thread, but I noticed reading the comments from the OP on other answers that the original goal was apparently to have border-radiuson the rows, and gaps betweenthe rows. It does not appear that the current solutions exactly do that. theazureshadow's answer is headed in the right direction, but seems to need a bit more.
这是一个旧线程，但我注意到阅读 OP 对其他答案的评论，原始目标显然是border-radius针对行和行之间的间隙。当前的解决方案似乎并没有完全做到这一点。theazureshadow 的回答朝着正确的方向发展，但似乎还需要更多。
For those interested in such, here is a fiddle that does separate the rows and applies the radius to each row.(NOTE: Firefox currently has a bug in displaying/clipping background-colorat the border radii.)
对于那些对此感兴趣的人，这里有一个小提琴，它确实将行分开并将半径应用于每一行。（注意：Firefox 当前在显示/裁剪background-color边界半径时存在错误。）
The code is as follows (and as theazureshadow noted, for earlier browser support, the various vendor prefixes for border-radiusneed added).
代码如下（正如 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;
}
回答by Ronni Egeriis Persson
Bonus info: border-radiushas no effect on tables with border-collapse: collapse;and border set on td's. And it doesn't matter if border-radiusis set on table, tror td—it's ignored.
奖励信息：对's和边框设置为's 的border-radius表没有影响。它并不重要，如果设置上，或-IT参数被忽略。border-collapse: collapse;tdborder-radiustabletrtd
回答by happyfunball
The tr element does honor the border-radius. Can use pure html and css, no javascript.
tr 元素确实遵循边界半径。可以使用纯 html 和 css，没有 javascript。
JSFiddle link: http://jsfiddle.net/pflies/zL08hqp1/10/
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>回答by Mathieu Turcotte
Not trying to take any credits here, all credit goes to @theazureshadow for his reply, but I personally had to adapt it for a table that has some <th>instead of <td>for it's first row's cells.
不想在这里获得任何功劳，所有功劳都归功于@theazureshadow 的回复，但我个人不得不将其调整为包含一些<th>而不是<td>第一行单元格的表格。
I'm just posting the modified version here in case some of you want to use @theazureshadow's solution, but like me, have some <th>in the first <tr>. The class "reportTable" only have to be applied to the table itself.:
我只是在这里发布修改后的版本，以防你们中的一些人想使用@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;
}
Feel free to adjust the paddings, radiuses, etc to fit your needs. Hope that helps people!
随意调整填充、半径等以满足您的需要。希望能帮到人！
回答by Ray
According to Operathe CSS3 standard does not define the use of border-radiuson TDs. My experience is that Firefox and Chrome support it but Opera does not (don't know about IE). The workaround is to wrap the td content in a div and then apply the border-radiusto the div.
根据Opera，CSS3 标准没有定义border-radius在 TD 上的使用。我的经验是 Firefox 和 Chrome 支持它，但 Opera 不支持（不了解 IE）。解决方法是将 td 内容包装在 div 中，然后将 应用于border-radiusdiv。
回答by levik
I think collapsing your borders is the wrong thing to do in this case. Collapsing them basically means that the border between two neighboring cells becomes shared. This means it's unclear as to which direction it should curve given a radius.
我认为在这种情况下折叠边界是错误的做法。折叠它们基本上意味着两个相邻单元格之间的边界变得共享。这意味着不清楚在给定半径的情况下它应该向哪个方向弯曲。
Instead, you can give a border radius to the two lefthand corners of the first TD and the two righthand corners of the last one. You can use first-childand last-childselectors as suggested by theazureshadow, but these may be poorly supported by older versions of IE. It might be easier to just define classes, such as .first-columnand .last-columnto serve this purpose.
相反，您可以为第一个 TD 的两个左手角和最后一个 TD 的两个右手角指定边界半径。您可以按照 theazureshadow 的建议使用first-child和last-child选择器，但旧版本的 IE 可能不支持这些选择器。仅定义类可能更容易，例如.first-column和.last-column用于此目的。
回答by ScubaSteve
I found that adding border-radius to tables, trs, and tds does not seem to work 100% in the latest versions of Chrome, FF, and IE. What I do instead is, I wrap the table with a div and put the border-radius on it.
我发现在最新版本的 Chrome、FF 和 IE 中，向表、trs 和 tds 添加边框半径似乎不能 100% 工作。相反，我做的是，我用一个 div 包裹桌子并将边框半径放在上面。
<div class="tableWrapper">
<table>
<tr><td>Content</td></tr>
<table>
</div>
.tableWrapper {
border-radius: 4px;
overflow: hidden;
}
If your table is not width: 100%, you can make your wrapper float: left, just remember to clear it.
如果你的桌子不是width: 100%，你可以制作你的包装器float: left，只要记得清除它。
回答by John Fotios
Use border-collapse:seperate; and border-spacing:0; but only use border-right and border-bottom for the tds, with border-top applied to th and border-left applied to only tr td:nth-child(1).
使用 border-collapse:separate; 和边框间距：0; 但只对 tds 使用 border-right 和 border-bottom，border-top 应用于 th，而 border-left 仅应用于 tr td:nth-child(1)。
You can then apply border radius to the corner tds (using nth-child to find them)
然后，您可以将边框半径应用于角 tds（使用 nth-child 找到它们）
https://jsfiddle.net/j4wm1f29/
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;
}
回答by E Alexis MT
All the answers are way too long. The easiest way to add border radius to a table element that accepts border as a property, is doing border radius with overflow: hidden.
所有的答案都太长了。将边框半径添加到接受边框作为属性的表格元素的最简单方法是使用 overflow: hidden 执行边框半径。
border: xStyle xColor xSize;
border-collapse: collapse;
border-radius: 1em;
overflow: hidden;
