I’m making an attempt to get a desk to render correctly in Safari on iOS (I’m utilizing Safari 17 to check this). The desk is meant to:
- Have 2 rows.
- Have 3 cells within the first row.
- Have 2 cells within the second row.
- Have each rows be of equal widths as measured by the overall variety of "columns" their cells take up.
Right here is my check HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<fashion kind="textual content/css">
desk, td {
border: 1px strong black;
border-collapse: collapse;
}
</fashion>
</head>
<physique>
<desk>
<tbody>
<tr>
<td align="heart" valign="center" colspan="2">AAAA</td>
<td align="heart" valign="center" colspan="2">BBBB</td>
<td align="heart" valign="center" colspan="2">CCCC</td>
</tr>
<tr>
<td align="heart" valign="center" colspan="3">DDDD</td>
<td align="heart" valign="center" colspan="3">EEEE</td>
</tr>
</tbody>
</desk>
</physique>
</html>
The best way it ought to look is that the divider of the second row must be centered beneath the second cell of the primary row. That is the way it renders in Firefox on Home windows, however that is the way it renders in Safari on iOS:
It renders as if the one colspan attribute was on the cell containing DDDD and its worth (of the attribute) was 2. What is going on on?
