table with rounded corners

dabblet.css

/**
 * table with rounded corners
 */

body {
	font-family: helvetica;
	padding-top: 45px;
	background-color: #fff;
}

h1 {
	color: #dfdfdf;
	text-align: center;
	padding-bottom: 10px;
	font-size: 20px;

}

/* table has shadow */

table {
	border-radius: 10px;
	margin: 20px auto;
	border-collapse: collapse;
	border-spacing:0;
	box-shadow: 0 2px 10px #ccc;
}

/*every cell has a border on bottom & right*/

td {
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 10px 20px;
	color: #444;
}

/*cancel the right border on the last column*/

td:last-child {
	border-right: none;
}

/*th has border only on bottom*/

th {
	border-bottom: 1px solid #ccc;
	padding: 10px 20px;

}

/*rounded corner top left - first th*/

th:first-child {
	border-radius: 10px 0 0 0;
}

/*rounded corner top right - last th*/

th:last-child {
	border-radius: 0 10px 0 0;

}

/*rounder corner bottom left - first cell of last row*/

tr:last-child td:first-child {
	border-radius: 0 0 0 10px;
}

/*rounded corner bottom right - last cell of last row*/

tr:last-child td:last-child {
	border-radius: 0 0 10px 0;

}

/*last row in has no border on the bottom*/

table tr:last-child td {
	border-bottom: none;

}

/*table header style*/
/*note: the gradient must be on the <th> & <td>,
ff you put it on the <tr> it will stick out of the
rounded corners in Firefox*/

thead tr th {
	background-image: linear-gradient(top, #f7f7f7 0%, #d4d4d4 100%);;

}

/*table row style*/

tr td {
	background-image: linear-gradient(top, #ffffff 0%, #e4f0ff 100%);
	text-shadow: 0 1px 0 #fff;
}

/*table even rows style*/

tr:nth-child(even) td {
	background-image: linear-gradient(top, #ffffff 0%, #eee 100%);

}

dabblet.html

<h1>✪ css3 table with rounded corners</h1>

<table>
	<thead>
		<tr>
			<th>head 1:1</th>
			<th>head 1:2</th>
			<th>head 1:3</th>
		</tr>
	</thead>
	<tr>
		<td>cell 3:1</td>
		<td>cell 3:2</td>
		<td>cell 3:3</td>
	</tr>
	<tr>
		<td>cell 3:1</td>
		<td>cell 3:2</td>
		<td>cell 3:3</td>
	</tr>
	<tr>
		<td>cell 3:1</td>
		<td>cell 3:2</td>
		<td>cell 3:3</td>
	</tr>
	<tr>
		<td>cell 3:1</td>
		<td>cell 3:2</td>
		<td>cell 3:3</td>
	</tr>
</table>

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"result"}