有没有人知道如何按照我们的喜好设计tr?
我已经在表格上使用了边框折叠,之后tr可以显示我给他们的1px的实心边框。
但是,当我尝试使用-moz-border-radius
时,它不起作用。即使是简单的保证金也不起作用。
发布于 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。
发布于 2012-07-17 20:05:24
额外信息:border-radius
对在td
上设置了border-collapse: collapse;
和边框的表格没有影响。无论border-radius
是设置在table
,tr
还是td
上-它都会被忽略。
发布于 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>
https://stackoverflow.com/questions/4094126
复制相似问题