Потому что ширина вашего столбца противоречит. В строке 1 у вас есть столбцы шириной 20, 50/2; в строке 2 у вас есть ширина столбца 50/2, 20.
Row 1, Column 1 is defined as 20.
Row 1, Column 2 is defined as 50.
Row 2, Column 1 is defined as 50.
Row 2, Column 2 is defined as 20.
Вы не можете иметь перекрывающиеся кольспаны различной ширины, ячейки таблицы должны располагаться друг над другом. Вы пытаетесь нарисовать эту таблицу:
|-----|----------|
|----------|-----|
Что недопустимо, поскольку столбцы не совпадают. Для этого вам нужно добавить больше столбцов:
|-----|----.-----|
|-----.----|-----|
Где "." это столбец, который скрыт столбцом span Попробуйте этот HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
</head>
<body>
<table border="1" style="table-layout: fixed;">
<colgroup>
<col style="width: 20px;"/>
<col style="width: 30px;"/>
<col style="width: 20px;"/>
</colgroup>
<tbody>
<tr>
<td>20</td>
<td colspan="2">50</td>
</tr>
<tr>
<td colspan="2">50</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>