Consider the following table in html:
<table style="border-collapse:collapse">
<tr>
<td style="height:25px"></td>
<td style="width:150px;border:1px solid #aaa;"></td>
<td rowspan="4" style="width:10px;"></td>
<td style="width:150px;border:1px solid #aaa;"></td>
</tr>
<tr>
<td style="height:25px"></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="height:25px"></td>
<td></td>
<td></td>
</tr>
</table>This table renders just fine on every desktop web browser I've tried, but on the mobile web browsers I've tried (iOS: Safari and Chrome), the middle column extends the left and right borders to the bottom. It looks like this:
Is there any way to get around this without, ideally without changing border-collapse or the middle column's rowspan?