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

Question

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

我在桌子上使用了边框折叠,之后tr可以显示1px实线边框我给它们.

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

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

请务必提供所有供应商前缀.这是一个实际的例子.

Answer 2

行之间的实际间距

这是一个旧线程,但是我注意到OP在其他答案上阅读了其他答案的评论,原来的目标显然border-radius是在行上,以及行之间的间隙.目前的解决方案似乎并不是这样.theazureshadow的答案朝着正确的方向发展,但似乎还需要更多.

对于那些对此感兴趣的人,这里有一个小提琴,它将行分开并将半径应用于每一行.(注意:Firefox目前background-color在边界半径显示/剪裁时存在错误.)

代码如下(并且如上所述,对于早期的浏览器支持,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; 
}

Answer 3

奖励信息:border-radius对于带有border-collapse: collapse;和设置边框的表格没有影响td.如果border-radius设置为on 无关紧要table,tr或者td-it被忽略.

http://jsfiddle.net/Exe3g/

Answer 4

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>