Hello to all.
There was a problem with the use of the property border-radius to table cells for IE8.
The "border-radius works for the tag "th", but does not work for the tag "td".
Can anyone faced such problem?
HTML
Code:
<table>
<thead>
<tr>
<th>th1</th>
<th>th2</th>
<th class="last-child">th3</th>
</tr>
</thead>
<tbody
<tr>
<td>td11</td>
<td>td12</td>
<td>td13</td>
</tr>
<tr class="last-child">
<td>td21</td>
<td>td22</td>
<td class="last-child">td23</td>
</tr>
</tbody
</table>
CSS:
Code:
table{
border-radius: 7px;
-icab-border-radius: 7px;
-khtml-border-radius: 7px;
-moz-border-radius: 7px;
-ms-border-radius: 7px;
-o-border-radius: 7px;
-webkit-border-radius: 7px;
behavior: url(/host/pie/pie.htc);
}
table thead th:first-child{
border-radius: 7px 0 0 0;
-icab-border-radius: 7px 0 0 0;
-khtml-border-radius: 7px 0 0 0;
-moz-border-radius: 7px 0 0 0;
-ms-border-radius: 7px 0 0 0;
-o-border-radius: 7px 0 0 0;
-webkit-border-radius: 7px 0 0 0;
behavior: url(/host/pie/pie.htc);
}
table thead th.last-child{
border-radius: 0 7px 0 0;
-icab-border-radius: 0 7px 0 0;
-khtml-border-radius: 0 7px 0 0;
-moz-border-radius: 0 7px 0 0;
-ms-border-radius: 0 7px 0 0;
-o-border-radius: 0 7px 0 0;
-webkit-border-radius: 0 7px 0 0;
behavior: url(/host/pie/pie.htc);
}
table tr.last-child td:first-child{
border-radius: 0 0 7px 0;
-icab-border-radius: 0 0 7px 0;
-khtml-border-radius: 0 0 7px 0;
-moz-border-radius: 0 0 7px 0;
-ms-border-radius: 0 0 7px 0;
-o-border-radius: 0 0 7px 0;
-webkit-border-radius: 0 0 7px 0;
behavior: url(/host/pie/pie.htc);
}
table tr.last-child td.last-child{
border-radius: 0 0 0 7px;
-icab-border-radius: 0 0 0 7px;
-khtml-border-radius: 0 0 0 7px;
-moz-border-radius: 0 0 0 7px;
-ms-border-radius: 0 0 0 7px;
-o-border-radius: 0 0 0 7px;
-webkit-border-radius: 0 0 0 7px;
behavior: url(/host/pie/pie.htc);
}
Forums
