i want to create a class for element that rounded around of table and alternative row color (gray and white). and first row as header style (negative) also last row as footer.
now I change left top of first row first cell to rounded, and first row last cell right top also rounded ...
this is not good solution. anyone can help me?
with current style your problem resolved:
<html>
<head>
<style>
table#t01 td{
padding:5px;
border: 1px gray solid;
}
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 tr:first-child td:first-child {
border-top-left-radius: 10px;
}
table#t01 tr:first-child td:last-child {
border-top-right-radius: 10px;
}
table#t01 tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
table#t01 tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<table id="t01" cellspacing="0" align="center">
<tr>
<td>first row - first cell</td>
<td>first row - second cell</td>
<td>first row - third cell</td>
</tr>
<tr>
<td>second row - first cell</td>
<td>second row - second cell</td>
<td>second row - third cell</td>
</tr>
<tr>
<td>third row - first cell</td>
<td>third row - second cell</td>
<td>third row - third cell</td>
</tr>
<tr>
<td>forth row - first cell</td>
<td>forth row - second cell</td>
<td>forth row - third cell</td>
</tr>
<tr>
<td>fifth row - first cell</td>
<td>fifth row - second cell</td>
<td>fifth row - third cell</td>
</tr>
</table>
</body>
</html>
