3

我正忙于在 jquery mobile 中使用回流表。我想让我的桌子的第一行和最后一行有圆角。我正在使用以下代码：

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>

我实际上只是希望最顶部和最底部的单元格具有圆形边缘。

4

3 回答 3

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;
}
于 2013-07-04T09:36:33.437 回答
0

您的问题与元素的显示属性有关，这应该可以解决。

于 2013-07-04T09:25:33.377 回答
0

它通过为表格本身提供边框属性来工作：

table {
  border: 1px solid #000;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}

演示

于 2013-07-04T09:46:35.047 回答