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

时间：2010-11-04 05:31:35

标签： css

有谁知道我们喜欢如何设计tr？

我在桌子上使用了边框折叠，之后tr可以显示我提供的1px实线边框。

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

12 个答案:

答案 0 :(得分：169)

您只能将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。

答案 1 :(得分：26)

行之间的实际间距

这是一个旧线程，但我注意到OP在其他答案中阅读了OP的评论，原来的目标显然是行上有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。）

代码如下（并且注意到，对于早期的浏览器支持，需要添加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; 
}

答案 2 :(得分：8)

加分信息：border-radius对border-collapse: collapse;并在td设置边框的表格没有影响。如果在border-radius，table或tr上设置了td并不重要 - 它会被忽略。

http://jsfiddle.net/Exe3g/

答案 3 :(得分：2)

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

相反，您可以为第一个TD的两个左角和最后一个的两个右角提供边界半径。您可以按照theazureshadow的建议使用first-child和last-child选择器，但旧版本的IE可能不太支持这些选择器。为此目的定义类可能更容易，例如.first-column和.last-column。

答案 4 :(得分：2)

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

答案 5 :(得分：1)

我发现在最新版本的Chrome，FF和IE中，向tables，trs和tds添加border-radius似乎不能100％工作。我做的是，我用一个div包裹表格并将border-radius放在上面。

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

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

如果您的表格不是width: 100%，您可以制作包装float: left，只需记住清除它。

答案 6 :(得分：1)

tr元素确实遵循border-radius。可以使用纯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>

答案 7 :(得分：1)

这里没有试图获得任何学分，所有学分归于@theazureshadow以获得他的答复，但我个人不得不将其改编为一张表格，其中包含<th>而不是<td>的表格。第一排的细胞。

我只是在这里发布修改后的版本，以防有些人想要使用@ theazureshadow的解决方案，但像我一样，在第一个<th>中有一些<tr>。课程＆＃34; reportTable＆＃34;只需要应用于表本身。：

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

随意调整衬垫，半径等，以满足您的需求。希望能帮助别人！

答案 8 :(得分：1)

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

答案 9 :(得分：1)

所有答案都太长了。将边界半径添加到任何表元素表，tr，th，thead，tbody等的最简单方法是使用溢出边界进行隐藏：隐藏。

  border-collapse: collapse;
  border-radius: 1em;
  overflow: hidden;

答案 10 :(得分：0)

如果表格已崩溃，则使用box-shadow

答案 11 :(得分：-2)

我建议你改用 .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;
  }
}
相关问题
最新问题