我正忙着在jquery mobile中使用reflow表。我想让我的桌子的第一行和最后一行有圆角。我正在使用以下代码:
th:first-child {
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
border-radius: 6px 0 0 0;
}
th:last-child {
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
border-radius: 0 6px 0 0;
}
HTML与此类似;
<table>
<thead>
<tr>
<th>First column</th>
<th>Second column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row one, cell one</td>
<td>Row one, cell two</td>
</tr>
<tr>
<td>Row two, cell one</td>
<td>Row two, cell two</td>
</tr>
<tr>
<td>Row three, cell one</td>
<td>Row four, cell two</td>
</tr>
</tbody>
我确实希望最顶部和最底部的单元格具有圆形边缘。
答案 0 :(得分:2)
这有点接近......
thead tr:first-child th:first-child {
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
border-radius: 6px 0 0 0;
}
thead tr:first-child th:last-child {
-moz-border-radius: 0px 6px 0 0;
-webkit-border-radius: 0px 6px 0 0;
border-radius: 0px 6px 0 0;
}
tr:last-child td:first-child{
-moz-border-radius: 0px 0px 0px 6px;
-webkit-border-radius: 0px 0px 0px 6px;
border-radius: 0px 0px 0px 6px;
}
tr:last-child td:last-child{
-moz-border-radius: 0px 0px 6px 0px;
-webkit-border-radius: 0px 0px 6px 0px;
border-radius: 0px 0px 6px 0px;
}
答案 1 :(得分:0)
你的问题与元素的显示属性有关,thi应解决它。
答案 2 :(得分:0)
它的工作原理是为表本身提供边框属性:
table {
border: 1px solid #000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}