Smart TV

Table elements alignment on 2012 platform

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

Text-align property processing by 2012 and older platform browsers

Contents

Webkit 2012
Maple 2010-2011
Solution
Source Files
Bad example
Good example

Text-align style attribute is by default applied only for block-level elements. When the parent element has the text-align parameter set, and the child is a table, the result differs between 2012 and older platforms.

Webkit 2012

Text-align style is not applied to the child table.

Figure 1. Webkit - table aligned to the left despite the style text-align: right

Maple 2010-2011

Text-align style is applied.

Figure 2. Maple - table aligned to the right.

Solution

In order to align the table inside the parent element, use the align table attribute.

Source Files

Note

The files needed for the sample application are here.

Bad example

<div style="text-align: right; background-color: orange;">
    <table border="1">
        <tr>
            <td>text2</td>
        </tr>
    </table>
</div>

Good example

<div style="background-color: orange;">
    <table border="1" align="right">
        <tr>
            <td>text2</td>
        </tr>
    </table>
</div>