Table column with child elements 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 cell width calculations on 2012 platform when there is a child element with specified width.

Contents

The issue described in this document happens when a <div> element is placed inside a table, and width parameter of both the <div> and table cell in the same column are defined. The result width of the whole column will be calculated in a different way between the 2012 and older platforms.

Source Files

Note

The files needed for the sample application are here

Webkit 2012

The column width is as defined for the child <div>

Maple 2010-2011

The column width is as defined for the table cell

Solution

In order to make the result look the same on both platforms, remove the width property from child <div> element.

Bad example

<table cellspacing="0" cellpadding="0" border="1">
    <tr>
        <td width="220px"></td>
        <td width="135px" height="192px"></td>
    </tr>
    <tr>
        <td width="220px"></td>
        <td height="30px">
            <div style="width: 200px;">text</div>
        </td>
    </tr>
</table>

Good example

<table cellspacing="0" cellpadding="0" border="1">
    <tr>
        <td width="220px"></td>
        <td width="135px" height="192px"></td>
    </tr>
    <tr>
        <td width="220px"></td>
        <td height="30px">
            <div>text</div>
        </td>
    </tr>
</table>