create rounded alternative table css class

Question

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?

It's unclear what you're asking. Can you show us some basic markup and the intended appearance you want to achieve? — Terry, May 27 '18 at 18:01

score 1 · Accepted Answer · answered May 27 '18 at 18:21

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>

create rounded alternative table css class

1 Answers1