I’m using rowspan on a HTML table with varying rows, however I’m experiencing an inconsistent cell height as screenshot. I would expect each cell to be evenly spaced, exactly like the row above – am I missing something or is this a quirk?
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
<table>
<thead>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<th>Heading 4</th>
<th>Heading 5</th>
</thead>
<tbody>
<tr>
<td rowspan="3">Row 1</td>
<td>1</td>
<td rowspan="3">Example</td>
<td rowspan="3">Example</td>
<td rowspan="3">A<br />
B<br />
C<br />
D<br />
E<br />
F<br />
G<br />
H</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td rowspan="2">Row 2</td>
<td>4</td>
<td rowspan="2">Example</td>
<td rowspan="4">Example</td>
<td rowspan="4">A<br />
B<br />
C<br />
D<br />
E<br />
F<br />
G<br />
H</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td rowspan="3">Row 3</td>
<td>6</td>
<td rowspan="2">Example</td>
</tr>
<tr>
<td>7</td>
</tr>
</tbody>
</table>1