<table id="customers">
<tr>
<th>Name</th>
<th>Age</th>
<th>Role</th>
</tr>
<tr>
<td>Temitope</td>
<td>12</td>
<td>Accountant</td>
</tr>
<tr>
<td>Alfred</td>
<td>23</td>
<td>Designer</td>
</tr>
<tr>
<td>Bello</td>
<td>14</td>
<td>Painter</td>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>Architect</td>
</tr>
<tr>
<td>James</td>
<td>10</td>
<td>Manager</td>
</tr>
</table>
body{
box-sizing: border-box
border: 1px solid #ddd;
}
table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
border: none
}
table td, #customers th {
padding: 8px;
}
table tr:nth-child(odd){background-color: #f2f2f2;}
table tr:hover {background-color: #ddd;}
table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #331763;
color: white;
}
td:first-child,
th:first-child {
border-radius: 10px 0 0 10px;
}
td:last-child,
th:last-child {
border-radius: 0 10px 10px 0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.