Create table with round corner in HTML and CSS
Description
The following code shows how to create table with round corner.
Example
<!--from w w w . ja va 2s. c om-->
<!DOCTYPE html>
<html>
<head>
<style>
.myTable {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.myTable thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.myTable tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
.myTable-rounded {
border: none;
}
.myTable-rounded thead th {
background-color: #CCC;
border: none;
text-shadow: 1px 1px 1px #ccc;
color: #333;
}
.myTable-rounded thead th:first-child {
border-radius: 10px 0 0 0;
}
.myTable-rounded thead th:last-child {
border-radius: 0 10px 0 0;
}
.myTable-rounded tbody td {
border: none;
border-top: solid 1px #957030;
background-color: #EEE;
}
.myTable-rounded tbody tr:last-child td:first-child {
border-radius: 0 0 0 10px;
}
.myTable-rounded tbody tr:last-child td:last-child {
border-radius: 0 0 10px 0;
}
</style>
</head>
<body>
<table class="myTable myTable-rounded">
<thead>
<tr>
<th>Name</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>$4</td>
</tr>
<tr>
<td>B</td>
<td>$7</td>
</tr>
<tr>
<td>C</td>
<td>$2</td>
</tr>
<tr>
<td>D</td>
<td>$7</td>
</tr>
<tr>
<td>E</td>
<td>$3</td>
</tr>
</tbody>
</table>
</body>
</html>
The code above generates the following result.
