top

Table inside a floating box resized on 2012 platform

Published 2014-10-27 | (Compatible with SDK 3.5,4.5,5.0,5.1 and 2012,2013,2014 models)

Different table width calculation on 2012 platform when it is located within a floating element.

This issue occurs when:

  • a table is put inside a floating box
  • width of parent, table and table cell is defined
  • table width is set to 100% and table cell width is smaller than parent

Webkit 2012

Table width is specified by size of the table cell.

Maple 2010-2011

Table width is specified by the value defined for table

Solution

Avoid the float property of any elements.

Bad example

<div style="width: 400px; height: 30px;">
    <div style="float: left;">
        <table style="width: 100%; border: 1px;">
            <tr>
                <td style="width: 200px; height: 50px;">
                    <div>1111</div>
                </td>
            </tr>
        </table>
    </div>
</div>

Good example

<div style="width: 400px; height: 30px;">
    <div>
        <table style="width: 100%; border: 1px;">
            <tr>
                <td style="width: 200px; height: 50px;">
                    <div>1111</div>
                </td>
            </tr>
        </table>
    </div>
</div>

See also

Refer to files in this package.