Weird behavior with table and rowspan

dabblet.css

/**
 * Weird behavior with table and rowspan
 */
td {
	background-color: orange;
	width: 200px;
	vertical-align: top;
}
tr + tr td {
	background-color: blue;
}
tr + tr + tr td {
	background-color: green;
}
tr:last-child td {
	height: 1px;
}

dabblet.html

<table>
	<tbody>
		<tr>
			<td rowspan="3">
				a<br />a<br />a<br />a<br />a<br />a<br />a<br />a
			</td>
			<td rowspan="2">
				a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a
			</td>
			<td>
				b
			</td>
		</tr>
		<tr>
			<td>
				c
			</td>
		</tr>
		<tr>
			<td>
				e
			</td>
			<td>
				d
			</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td rowspan="3">
				a<br />a<br />a<br />a<br />a<br />a<br />a<br />a
			</td>
			<td>
				b
			</td>
			<td rowspan="2">
				a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a
			</td>
		</tr>
		<tr>
			<td>
				c
			</td>
		</tr>
		<tr>
			<td>
				e
			</td>
			<td>
				d
			</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td rowspan="3">
				a
			</td>
			<td rowspan="2">
				a
			</td>
			<td>
				b
			</td>
		</tr>
		<tr>
			<td>
				c
			</td>
		</tr>
		<tr>
			<td>
				e
			</td>
			<td>
				d
			</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td rowspan="2">
				a
			</td>
			<td>
				b
			</td>
		</tr>
		<tr>
			<td>
				c
			</td>
		</tr>
	</tbody>
</table>

dabblet.js

// alert('Hello world!');

settings.json

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