This HTML table is being misinterpreted by some browsers, and I cannot understand why :

Chrome and Outlook display the rendering I expect, where the 2nd cells of the 2nd and 3rd lines pass over the 4th cell of the lines 4 to 10.

Screenshot of Chrome rendering

Internet Explorer 8 and Opera 10 display something different, where the 4th cell of the lines 4 to 10 "starts after" the 2nd cells of the 2nd and 3rd lines.

Screenshot of Internet Explorer 8 rendering

Any guess why my colspans et rowspans are not interpreted the same way ? Which browsers are right ? How can I arrange my code so that they all render like Chrome ?

My actual code : (Sorry, dirty code, this is meant to be an e-mail signature)

<table border=0 cellspacing=0 cellpadding=0 width=400 style='width:300pt;border-collapse:collapse;border:1px solid black;'>
 <tr style='height:9.75pt'>
  <td colspan=6 valign=top style='border:1px solid black;height:9.75pt;width:300pt;' width="400">
  </td>
 </tr>
 <tr style='mso-yfti-irow:1;height:12pt' height="16">
  <td rowspan=9 valign=top style='border:1px solid black;height:12pt;width:14.25pt' width="19">
  </td>
  <td bgcolor="red" colspan=3 valign=top style='border:1px solid black;height:12pt;width:203.25pt;' width="271">
  </td>
  <td rowspan=2 valign=top style='border:1px solid black;height:12pt;width: 72pt' width="96">
  </td>
  <td rowspan=2 valign=top style='border:1px solid black;height:12pt;width:10.5pt' width="14">
  </td>
 </tr>
 <tr style='mso-yfti-irow:2;height:12pt' height="16">
  <td bgcolor="red" colspan=3 valign=top style='border:1px solid black;height:12pt;width:203.25pt;' width="271" height="16">
  </td>
 </tr>
 <tr style='mso-yfti-irow:3;height:3.75pt' height="5">
  <td colspan=2 valign=top style='border:1px solid black;height:3.75pt;width:170.25pt' width="227" height="5">
  </td>
  <td colspan=3  rowspan=7 valign=top style='border:1px solid black;height:3.75pt;width:115.5pt' width="154">
  </td>
 </tr>
 <tr style='mso-yfti-irow:4;height:11.25pt' height="15">
  <td valign=top style='border:1px solid black;height:11.25pt;width:27.75pt' width="37">
  </td>
  <td valign=top style='border:1px solid black;height:11.25pt;width:142.5pt' width="190">
  </td>
 </tr>
 <tr style='mso-yfti-irow:5;height:11.25ptpt' height="15">
  <td valign=top style='border:1px solid black;height:11.25pt;width:27.75pt' width="37" height="15">
  </td>
  <td valign=top style='border:1px solid black;height:11.25pt;width:142.5pt' width="190" height="15">
  </td>
 </tr>
 <tr style='mso-yfti-irow:6;height:3.75pt' height="5">
  <td colspan=2 valign=top style='border:1px solid black;height:3.75pt;width:170.25pt' width="227">
  </td>
 </tr>
 <tr style='mso-yfti-irow:7;height:11.25pt' height="15">
  <td colspan=2 valign=top style='border:1px solid black;height:11.25pt;width:170.25pt' width="227" height="31" >
  </td>
 </tr>
 <tr style='mso-yfti-irow:8;height:23.25pt' height="31">
  <td colspan=2 valign=top style='border:1px solid black;height:23.25pt;width:170.25pt' width="227">
  </td>
 </tr>
 <tr style='mso-yfti-irow:9;mso-yfti-lastrow:yes;height:50.25pt' height="67">
  <td colspan=2 valign=top style='border:1px solid black;height:50.25pt;width:170.25pt' width="227">
  </td>
 </tr>
</table>

1 answer

1
point
This was chosen as the best answer

I fear you may have detected a bug in Opera. Adding a single row with exactly as many <td> tags as there are logical columns seems to help.

I made a minimal testcase and put it online here:

Opera table colspan bug

I also filed a bugreport.

Update Just adding table-layout: fixed to the table style might also help.

Answered over 8 years ago by Kristof Neirynck
  • Thank you Kristof. It worked adding table-layout:fixed :-) Jalil about 8 years ago