Chrome - Colspan not working as expected - html

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

Answer 2

style.display=''
works for me with chrome.
'display:table-cell'
does not

Answer 3

Rather than adding the CSS property display:inline to the <td>, which for some reason IE is happy with and Chrome is not, I would update your JavaScript to just remove the display:none style and let the browser's default display:table-cell take affect.
In the <select name="update_or_delete"> onchange method simply have:
if(this.value=='Update') {
document.getElementById('ammend_contact_details').style.display='';
} else {
document.getElementById('ammend_contact_details').style.display='none';
}

Answer 4

Chrome doesn't seem to respect colspan unless it has at least 1 row exactly matching number of columns in the table. I tried to make a grid with 2 items in 1st row and 3 items in 2nd row. For Firefox that's all you need:
td {
display: table-cell;
padding: 10px;
text-align: center;
background: #eee;
}
<table style="width: 100%">
<tr>
<td colspan="3" style="width: 50%">box 1.1</td>
<td colspan="3" style="width: 50%">box 1.2</td>
</tr>
<tr>
<td colspan="2" style="width: 33.33%">box 2.1</td>
<td colspan="2" style="width: 33.33%">box 2.2</td>
<td colspan="2" style="width: 33.33%">box 2.3</td>
</tr>
</table>
But it doesn't work on Chrome and Edge, even though all <td>s have default styling: display: table-cell. To fix it you need to add empty row with exact match for column count so it finally looks like this:
td {
display: table-cell;
padding: 10px;
text-align: center;
background: #eee;
}
<table style="width: 100%">
<tr>
<td colspan="3" style="width: 50%">box 1.1</td>
<td colspan="3" style="width: 50%">box 1.2</td>
</tr>
<tr>
<td colspan="2" style="width: 33.33%">box 2.1</td>
<td colspan="2" style="width: 33.33%">box 2.2</td>
<td colspan="2" style="width: 33.33%">box 2.3</td>
</tr>
<tr style="visibility: hidden">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>