CODEWITHSUNDEEP
htmlcsshtml-table
Juris Vaiders
Juris Vaiders

Reputation: 635

Wrong column width when using table-layout:fixed

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%.

Problem with table-layout:fixed;

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

Upvotes: 0

Views: 1707

Answers (1)

IanO.S.
IanO.S.

Reputation: 1382

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

Upvotes: 1

Related Questions