th with rounded corners

dabblet.css

/**
 * th with rounded corners
 */

table
{
	border-spacing: 0px;
}

th, td
{
	padding: 1em;
	background: silver;
	text-align: center;
	vertical-align: middle;
}

th, th ~ td
{
	border-top: 1em;
	box-shadow: inset 0 1em 0 0 white;
	padding-top: 2em;
}

th
{
	border-radius: 1em 0 0 1em;
}

dabblet.html

		<table>
			<tbody>
				<tr>
					<th>th</th>
					<td>td</td>
					<td>td</td>
					<td>td</td>
				</tr>
				
				<tr>
					<th rowspan="2">th</th>
					<td>td</td>
					<td>td</td>
					<td>td</td>
				</tr>
				<tr>
					<td colspan="3">td</td>
				</tr>
				
				<tr>
					<th rowspan="2">th</th>
					<td>td</td>
					<td>td</td>
					<td>td</td>
				</tr>
				<tr>
					<td>td</td>
					<td colspan="2">td</td>
				</tr>	
				
				<tr>
					<th rowspan="3">th</th>
					<td>td</td>
					<td>td</td>
					<td>td</td>
				</tr>
				<tr>
					<td>td</td>
					<td colspan="2">td</td>
				</tr>
				<tr>
					<td colspan="3">td</td>
				</tr>
			</tbody>
		</table>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"","page":"all"}