I am trying to get a table to render properly in Safari on iOS (I am using Safari 17 to test this). The table is supposed to:
- Have 2 rows.
- Have 3 cells in the first row.
- Have 2 cells in the second row.
- Have both rows be of equal widths as measured by the total number of "columns" their cells take up.
Below is my test HTML
The way it should look is that the divider of the second row should be centered underneath the second cell of the first row. That’s how it renders in Firefox on Windows, but this is how it renders in Safari on iOS:
It renders as if the only colspan attribute was on the cell containing DDDD and its value (of the attribute) was 2. What’s going on?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
table,
td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td align="center" valign="middle" colspan="2">AAAA</td>
<td align="center" valign="middle" colspan="2">BBBB</td>
<td align="center" valign="middle" colspan="2">CCCC</td>
</tr>
<tr>
<td align="center" valign="middle" colspan="3">DDDD</td>
<td align="center" valign="middle" colspan="3">EEEE</td>
</tr>
</tbody>
</table>
</body>
</html>
