首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在表行上添加边框半径

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

Stack Overflow用户
提问于 2010-11-04 13:31:35
回答 13查看 211K关注 0票数 149

有没有人知道如何按照我们的喜好设计tr?

我已经在表格上使用了边框折叠,之后tr可以显示我给他们的1px的实心边框。

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

EN

回答 13

Stack Overflow用户

回答已采纳

发布于 2010-11-04 13:40:05

您只能对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

票数 278
EN

Stack Overflow用户

发布于 2012-07-17 20:05:24

额外信息:border-radius对在td上设置了border-collapse: collapse;和边框的表格没有影响。无论border-radius是设置在tabletr还是td上-它都会被忽略。

http://jsfiddle.net/Exe3g/

票数 18
EN

Stack Overflow用户

发布于 2015-11-20 00:12:33

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>

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/4094126

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档