Question

In my example jsfiddle I have two HTML tables. They are basically the same – same class, same content, everything. The only difference is the order of rows.

<style>
.tbl-lay-fixed {table-layout:fixed}
</style>

<table class="tbl-lay-fixed" border="1" width="100%">
   <tr>
      <td width="5%">xxxx</td>
      <td width="95%">yyyyyyyyyy</td>
   </tr>
   <tr>
      <td colspan="2" width="100%">xxxx</td>
   </tr>
</table>

<table class="tbl-lay-fixed" border="1" width="100%">
   <tr>
      <td colspan="2" width="100%">xxxx</td>
   </tr>
   <tr>
      <td width="5%">xxxx</td>
      <td width="95%">yyyyyyyyyy</td>
   </tr>
</table>

Table number 1 is displayed correctly – width of the cells is correct.

Table number 2 is displayed incorrectly – second row have two columns with witdh set as 5% and 95% accordingly, but instead it is displayed as 50% 50%.

Where is the problem? It is the same in all browsers.

Answer 1

This seems to work in Firefox at least
(changing bottom TD colspan to 20)

just remove "width="100%" <table class="tbl-lay-fixed" border="1" width="100%"> from the table class