Chrome - Colspan not working as expected

Question

I have this code:

<tr>
    <td width="40%" align="left" class="form_cell">
    <span class="sub_header">Update or Delete</span><br />
    Please select whether you would like us to update this contacts details, or delete them from the system.
    </td>

    <td width="60%" align="left" class="form_cell">
    [class=form__parser func=updateDetails__updel(150.$update_or_delete$.true)]
    </td>
</tr>
<tr>
    <td width="100%" align="left" colspan="2" id="ammend_contact_details" style="display: none;">
        <table border="0" cellspacing="0" cellpadding="0" width="100%" align="left">
            <tr>
                <td width="40%" align="left" class="form_cell">
                <span class="sub_header">New Title</span><br />
                            Please enter the contacts new title, IE Mr, Mrs, Dr, Miss, Ms
                </td>

                <td width="60%" align="left" class="form_cell">
                <input type="text" name="update_contact_title" class="input" size="48" maxlength="6" value="$update_contact_title$" />
                </td>
            </tr>
        </table>
    </td>
</tr>

The code which start with [class=form__parser...] creates a drop down list. If you click one of the options, the cell below it (ID ammend_contact_details) is displayed, otherwise its hidden.

The website address for this page is: http://www.westlandstc.com/index.php?plid=6#eyJwbGlkIjoiNTkiLCJjbGlkIjoiNDQ2Iiwic2NsaWQiOiJudWxsIiwiZHluYW0iOiJudWxsIiwiYXBwSWQiOiJudWxsIn0= and the element in question is at the very bottom of the page.

The problem is, the colspanattribute works fine in internet explorer (surprise surprise), however, in Chrome, all the content which is supposed to be spread over the 2 parent columns, only goes into the 1st column.

I have narrowed the bug down further, if I remove the style="display: none" attribute it works fine. Everytime I try to change either the display style or visibility style, Chrome places everything back into the first column.

In addition, I tried setting the background colour of the cell which spans 2 columns to red. In internet explorer, again this works as expected. In chrome, no background-color is displayed.

Any ideas how to fix this?

Answer 1

What are you setting the 'display' property to in order to show it? iirc you would need to use 'display:table-cell' (or similar - can't remember the exact value) in order for chrome to treat it as a table cell