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?

Aquiline

Just a quick thing, you have "colspan='3'" when there's only two columns. Would that be anything to do with it? – Gallop

Sorry @Gallop That was just me testing something. It was originally set to colspan='2' but wondered if changing it to 3 would change anything. – Aquiline

Could you give a small example of your final code, instead of the link and the "this code creates" ? The easier it is for us to see an example of it going wrong, the easier it is to help. Maybe make an example in jsfiddle or something? – Marrilee

Hi @Marrilee Thanks for the reply, however its now working as expected, the issue was setting the display attribute to display: table-cell instead of inline/block. – Aquiline

If you can it would still be great to update the question to reflect what you had, so the question + answer are more complete? – Marrilee

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

Convergence

Its javascript which changes the display attribute to 'inline'. I've tried block and inline to no avail, however I will try table-cell (or similar) now. – Aquiline

Just tried table-cell and it works as expected :) Thank you very very very much!!! – Aquiline

Answer 2

style.display=''

works for me with chrome.

'display:table-cell'

does not

Harappa

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';
}

Velda

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>

Euromarket