<rml>
<head>
	<title>Table 01 ref</title>
	<link type="text/rcss" href="../../style.rcss"/>
	<meta name="Reference" content="Reference implemented using 'inline-blocks' instead. Row coloring does not work here. Might not be pixel accurate." />
	<style>
		table {
			display: block;
			border-width: 20dp 5dp 0;
			color: #333;
			text-align: center;
			margin: 0 auto;
			min-width: 100dp;
			max-width: 400dp;
		}
		body * {
			border-color: #666;
		}
		td {
			display: inline-block;
			box-sizing: border-box;
			padding: 15dp 5dp;
			width: 25%;
			height: 47dp;
			background: #3d3;
		}
		td.span2 { width: 50%; }
		td.span4 { width: 100%; }
		tr {
			display: block;
		}
		td:first-child {
			background: #6df;
			border-right-width: 3dp;
		}
		td:last-of-type {
			background: #dd3;
		}
		thead {
			display: block;
			color: black;
			background: #fff5;
			border-bottom: 3dp #666;
		}
		tbody {
			display: block;
		}
		tbody tr {
			border-bottom: 1dp #666a;
		}
		tbody tr:last-child {
			border-bottom: 0;
		}
		tbody tr:hover {
			background: #fff5;
		}
		tfoot {
			display: block;
			background: #666;
			color: #ccc;
		}
		tfoot td {
			padding-top: 0;
			padding-bottom: 0;
			text-align: right;
			height: 20dp;
		}
	</style>
</head>

<body>
<table>
	<thead>
		<tr>
			<td>A</td>
			<td class="span2">B</td>
			<td>C</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>D</td>
			<td>E</td>
			<td>F</td>
			<td>G</td>
		</tr>
		<tr>
			<td>H</td>
			<td>I</td>
			<td>J</td>
			<td>K</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td style="background: transparent" class="span4">[1] Footnote</td>
		</tr>
	</tfoot>
</table>

<handle size_target="#document"/>
</body>
</rml>
