<table class="flat-table flat-table-1">
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>City</th>
<th>Donation</th>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>Seattle</td>
<td>$12.95</td>
</tr>
<tr>
<td>Eddy</td>
<td>Johnston</td>
<td>Palo Alto</td>
<td>$15</td>
</tr>
</tbody>
</table>
<table class="flat-table flat-table-2">
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>City</th>
<th>Donation</th>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>Seattle</td>
<td>$12.95</td>
</tr>
<tr>
<td>Eddy</td>
<td>Johnston</td>
<td>Palo Alto</td>
<td>$15</td>
</tr>
</tbody>
</table>
<table class="flat-table flat-table-3">
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>City</th>
<th>Donation</th>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>Seattle</td>
<td>$12.95</td>
</tr>
<tr>
<td>Eddy</td>
<td>Johnston</td>
<td>Palo Alto</td>
<td>$15</td>
</tr>
</tbody>
</table>
.flat-table {
margin-bottom: 20px;
border-collapse:collapse;
font-family: 'Lato', Calibri, Arial, sans-serif;
border: none;
border-radius: 3px;
border-radius: 3px;
border-radius: 3px;
}
.flat-table th, .flat-table td {
box-shadow: inset 0 -1px rgba(0,0,0,0.25),
inset 0 1px rgba(0,0,0,0.25);
}
.flat-table th {
font-weight: normal;
font-smoothing: antialiased;
padding: 1em;
color: rgba(0,0,0,0.45);
text-shadow: 0 0 1px rgba(0,0,0,0.1);
font-size: 1.5em;
}
.flat-table td {
color: #f7f7f7;
padding: 0.7em 1em 0.7em 1.15em;
text-shadow: 0 0 1px rgba(255,255,255,0.1);
font-size: 1.4em;
}
.flat-table tr {
transition: background 0.3s, box-shadow 0.3s;
transition: background 0.3s, box-shadow 0.3s;
transition: background 0.3s, box-shadow 0.3s;
}
.flat-table-1 {
background: #336ca6;
}
.flat-table-1 tr:hover {
background: rgba(0,0,0,0.19);
}
.flat-table-2 tr:hover {
background: rgba(0,0,0,0.1);
}
.flat-table-2 {
background: #f06060;
}
.flat-table-3 {
background: #52be7f;
}
.flat-table-3 tr:hover {
background: rgba(0,0,0,0.1);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.