Vertical alignment and distribution of rows in table

Question

The second column spans 2 rows. I want the first column NOT to be divided by 50% for each row. Row2 should start right under the content of Row1.

<table border="1" style="width:850px">
    <tr>
        <td style="width: 50%; vertical-align: top;">1.Row Cell 1</td>
        <td rowspan="2" style="height:800px">1-2 Row Cell 2</td>
    </tr>
    <tr style="vertical-align:top">
        <td style="vertical-align:top">2.Row Cell 1</td>
    </tr>
</table>

OK, seems that this is related to Internet Explorer 11, but there must be a way to accomplish this!?

Answer 1

So there is your solution in the snippet below :

table , td, th {
	border: 1px solid #595959;
	border-collapse: collapse;
}
td, th {
	padding: 3px;
	width: 250px;
	height: 150px;
}
th {
	background: #f0e6cc;
}
.even {
	background: #fbf8f0;
}
.odd {
	background: #fefcf9;
}

<table>
	<tbody>
		<tr>
			<td style="height:1em">This is a test thank you for your attention</td>
			<td rowspan="2"></td>
		</tr>
		<tr>
			<td></td>
		</tr>
	</tbody>
</table>

Hope it help.