Table cells expanding in IE when previous row has rowspan? - html

Question

I have a complicated set of table rows with colspans and rowspans all over the shop. All works fine except for the bottom row in Internet Explorer which forces it's height to be the same as the previous row, which is set to rowspan="2". How can I fix this?
Also, the layout needs to be a table because a PDF generator uses it and that requires tables. Ideally the HTML layout wouldn't change at all, but it can change if it needs to.
Below is the code. Look at it in Google Chrome to see how it should be displaying in IE.
.MhrPayslipDetail {
display: block;
font-family: sans-serif;
font-size: 16px;
padding: 20px 60px;
text-align: center;
}
.MhrPayslipDetail-payslip {
background-color: #fff;
border-collapse: separate;
border-spacing: 10px;
width: 100%;
}
.MhrPayslipDetail-label {
background-color: #c1c1c1;
border: 1px solid #c1c1c1;
border-radius: 5px;
font-weight: bold;
padding: 4px;
text-align: left;
vertical-align: middle;
}
.MhrPayslipDetail-cell,
.MhrPayslipDetail-cellRight {
background-color: #fff;
border: 1px solid #c1c1c1;
border-radius: 5px;
padding: 4px;
text-align: left;
vertical-align: middle;
}
.MhrPayslipDetail-cellRight {
text-align: right;
}
.MhrPayslipDetail-list {
border: 0;
border-collapse: collapse;
width: 100%;
}
.MhrPayslipDetail-listCell,
.MhrPayslipDetail-listLabel,
.MhrPayslipDetail-listCellHeader {
border: 0;
padding: 1px;
text-align: left;
vertical-align: middle;
}
.MhrPayslipDetail-listCellRight,
.MhrPayslipDetail-listCellHeaderRight {
border: 0;
padding: 1px;
text-align: right;
vertical-align: middle;
}
.MhrPayslipDetail-listLabel,
.MhrPayslipDetail-listCellHeader {
font-weight: bold;
width: 50%;
}
.MhrPayslipDetail-details {
font-size: .9em;
}
.MhrPayslipDetail-paymentsDetails,
.MhrPayslipDetail-deductionsDetails {
height: 21em;
vertical-align: top;
}
.MhrPayslipDetail-thisPeriodDetails,
.MhrPayslipDetail-yearToDateDetails {
height: 10em;
vertical-align: top;
}
<div class="MhrPayslipDetail">
<table class="MhrPayslipDetail-payslip">
<tbody>
<tr>
<td colspan="3" rowspan="3" class="MhrPayslipDetail-cell MhrPayslipDetail-paymentsDetails">
<table class="MhrPayslipDetail-details MhrPayslipDetail-list">
<thead>
<tr>
<th class="MhrPayslipDetail-listCellHeader">Description</th>
<th class="MhrPayslipDetail-listCellHeaderRight">U/T</th>
<th class="MhrPayslipDetail-listCellHeaderRight">Rate</th>
<th class="MhrPayslipDetail-listCellHeaderRight">Cash</th>
</tr>
</thead>
<tbody>
<tr>
<td class="MhrPayslipDetail-listCell">Test Basic Pay</td>
<td class="MhrPayslipDetail-listCellRight"></td>
<td class="MhrPayslipDetail-listCellRight"></td>
<td class="MhrPayslipDetail-listCellRight">200.00</td>
</tr>
</tbody>
</table>
</td>
<td colspan="2" rowspan="3" class="MhrPayslipDetail-cell MhrPayslipDetail-deductionsDetails">
<table class="MhrPayslipDetail-details MhrPayslipDetail-list">
<thead>
<tr>
<th class="MhrPayslipDetail-listCellHeader">Description</th>
<th class="MhrPayslipDetail-listCellHeaderRight">Cash</th>
</tr>
</thead>
<tbody>
<tr>
<td class="MhrPayslipDetail-listCell">Tax</td>
<td class="MhrPayslipDetail-listCellRight">25.40</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">NI</td>
<td class="MhrPayslipDetail-listCellRight">24.00</td>
</tr>
</tbody>
</table>
</td>
<td colspan="2" class="MhrPayslipDetail-cell MhrPayslipDetail-thisPeriodDetails">
<table class="MhrPayslipDetail-details MhrPayslipDetail-list">
<thead>
<tr>
<th class="MhrPayslipDetail-listCellHeader">Description</th>
<th class="MhrPayslipDetail-listCellHeaderRight">Cash</th>
</tr>
</thead>
<tbody>
<tr>
<td class="MhrPayslipDetail-listCell">Taxable Pay</td>
<td class="MhrPayslipDetail-listCellRight">200.00</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">Employers National Insurance</td>
<td class="MhrPayslipDetail-listCellRight">27.60</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">Niable Pay</td>
<td class="MhrPayslipDetail-listCellRight">200.00</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<th colspan="2" class="MhrPayslipDetail-label">Year-to-date</th>
</tr>
<tr>
<td colspan="2" rowspan="2" class="MhrPayslipDetail-cell MhrPayslipDetail-yearToDateDetails">
<table class="MhrPayslipDetail-details MhrPayslipDetail-list">
<tbody>
<tr>
<td class="MhrPayslipDetail-listCell">Taxable Pay</td>
<td class="MhrPayslipDetail-listCellRight">7,200.00</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">NI</td>
<td class="MhrPayslipDetail-listCellRight">622.08</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">Tax</td>
<td class="MhrPayslipDetail-listCellRight">25.40</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">Niable Pay</td>
<td class="MhrPayslipDetail-listCellRight">7,200.00</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">Employers National Insurance</td>
<td class="MhrPayslipDetail-listCellRight">713.73</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<th class="MhrPayslipDetail-label">Payments</th>
<td class="MhrPayslipDetail-cellRight" colspan="2">200.00</td>
<th class="MhrPayslipDetail-label">Deductions</th>
<td class="MhrPayslipDetail-cellRight">49.40</td>
</tr>
</tbody>
</table>
</div>
UPDATE
Since submitting this question I have tried using sub-tables to separate out the columns, however I found that when I did that I wasn't able to get them to line up correctly due to border spacing and the PDF generator's lack of being able to use border-collapse:collapse;.
As an FYI, this is the PDF generator the system is using.