如何在表格行上添加边框半径
Posted
技术标签:
【中文标题】如何在表格行上添加边框半径【英文标题】：How to add border radius on table row 【发布时间】：2011-05-04 21:27:30 【问题描述】：有谁知道如何按照我们的喜好设置 tr 样式？
我在桌子上使用了border-collapse，之后tr可以显示我给他们的1px实心边框。
但是，当我尝试-moz-border-radius 时，它不起作用。即使是简单的边距也不起作用。
【问题讨论】：
【参考方案1】：您只能将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;
确保提供所有供应商前缀。这是example of it in action。
【讨论】：
对。如果你想在 IE 中使用圆角，你将不得不使用图像和奇怪的标记。 @Henson：不，因为 IEcss3pie.com 警告：如果你省略border-collapse: separate; 那么这将不起作用。
@KevinBorders 不正确，至少在 Chrome v39 中是这样。当我将背景颜色应用于表格本身时，我确实遇到了问题。显然它必须在 tr 或 td 元素上。
Chrome 44 需要 separate。【参考方案2】：
我认为在这种情况下折叠边界是错误的做法。折叠它们基本上意味着两个相邻单元格之间的边界变得共享。这意味着在给定半径的情况下，它应该向哪个方向弯曲尚不清楚。
相反，您可以为第一个 TD 的左两个角和最后一个 TD 的两个右角指定边框半径。您可以按照 theazureshadow 的建议使用 first-child 和 last-child 选择器，但旧版本的 IE 可能不太支持这些选择器。仅定义类（例如 .first-column 和 .last-column 来实现此目的）可能更容易。
【讨论】：
我折叠边框，这样 tr 就可以显示我给的样式。我会尝试类方法。但是保证金呢？我尝试使用边框间距来显示行之间的边距，但这不是最好的方法，我相信.... 如果行共享边框，则行之间不能有边距 - 即边框折叠时。我假设您要做的是让您的 TR 具有带圆角的背景颜色？如果是这样，取消折叠它们应该可以工作 其实更紧迫的事情是在行之间用边框显示边距。边框不一定必须有圆角【参考方案3】：奖励信息：border-radius 对带有border-collapse: collapse; 和在td 上设置边框的表格没有影响。如果border-radius 设置为table、tr 或td 也没关系——它会被忽略。
http://jsfiddle.net/Exe3g/
【讨论】：
jsfiddle 在 Firefox 上是圆角的。 @JukkaK.Korpela 是的，如果边界折叠：折叠；没有设置，点击切换按钮，看看神奇的事情发生了。【参考方案4】：根据Opera，CSS3 标准没有定义在 TD 上使用border-radius。我的经验是 Firefox 和 Chrome 支持它，但 Opera 不支持（不知道 IE）。解决方法是将 td 内容包装在 div 中，然后将 border-radius 应用于 div。
【讨论】：
【参考方案5】：行之间的实际间距
这是一个旧线程，但我注意到从 OP 读取 cmets 的其他答案，原来的目标显然是在行上有 border-radius，并且行之间有间隙。目前的解决方案似乎并没有完全做到这一点。 theazureshadow 的答案是朝着正确的方向前进，但似乎还需要更多。
对于那些对此感兴趣的人，here is a fiddle that does separate the rows and applies the radius to each row.（注意：Firefox currently has a bug in displaying/clipping background-color at the border radii。）
代码如下（正如 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;
【讨论】：
比上面的答案好多了。 唯一有效的解决方案。谢谢【参考方案6】：我发现在最新版本的 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，记得清除它。
【讨论】：
简单优雅的解决方案【参考方案7】：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>【讨论】：
将 TR 的显示属性更改为“块”很可能会弄乱表格的布局。特别是，如果您的表格有多行包含不同的内容长度，表格单元格将不会对齐。 @Jess 是对的。它只适用于display: block，作为副作用，如果它包含不同的长度，行对齐将被破坏。【参考方案8】：
这里没有尝试获得任何功劳，所有功劳归于@theazureshadow 的回复，但我个人不得不将其调整为具有一些<th> 而不是<td> 的表格，因为它是第一行的单元格。
我只是在这里发布修改后的版本，以防你们中的一些人想使用@theazureshadow 的解决方案，但像我一样，在第一个<tr> 中有一些<th>。 “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;
随意调整填充、半径等以满足您的需要。希望对大家有所帮助！
【讨论】：
【参考方案9】：如果表格折叠，则使用 box-shadow
【讨论】：
【参考方案10】：使用border-collapse:seperate；和边框间距：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;
【讨论】：
【参考方案11】：所有答案都太长了。将边框半径添加到接受边框作为属性的表格元素的最简单方法是使用溢出进行边框半径：隐藏。
border: xStyle xColor xSize;
border-collapse: collapse;
border-radius: 1em;
overflow: hidden;
【讨论】：
@ypresto #theazureshadow 的最佳答案提到边框半径不适用于 tr，但原因是您甚至无法为其应用边框，但表格确实有效 :( 我没有知道为什么，但这个答案来自 2013 年。【参考方案12】：我建议您改用 .less， 将您的 .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;
【讨论】：
【参考方案13】：这是一个在单行上放置带半径的边框的示例：
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>【讨论】：
【参考方案14】：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;
【讨论】：
就是这样。以上是关于如何在表格行上添加边框半径的主要内容，如果未能解决你的问题，请参考以下文章