Question

我有这段代码：

<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>

以[class=form__parser...]开头的代码会创建一个下拉列表。如果单击其中一个选项，则会显示其下方的单元格（ID ammend_contact_details），否则会隐藏它。

此页面的网址是：http://www.westlandstc.com/index.php?plid=6#eyJwbGlkIjoiNTkiLCJjbGlkIjoiNDQ2Iiwic2NsaWQiOiJudWxsIiwiZHluYW0iOiJudWxsIiwiYXBwSWQiOiJudWxsIn0=，相关元素位于页面的最底部。

问题是，colspan属性在Internet Explorer中工作正常（惊喜），但是，在Chrome中，所有应该分布在2个父列上的内容只会进入第1列。

我已经进一步缩小了这个问题，如果删除style="display: none"属性，它就可以了。每当我尝试更改显示样式或可见性样式时，Chrome都会将所有内容放回第一列。

此外，我尝试将跨越2列的单元格的背景颜色设置为红色。在Internet Explorer中，再次按预期工作。在chrome中，不显示背景颜色。

任何想法如何解决这个问题？

Answer 1

您要将'display'属性设置为什么才能显示？ iirc你需要使用'display：table-cell'（或者类似的 - 不记得确切的值）才能让chrome把它当作表格单元格

Answer 2

的style.display = ''

对我有用铬。

'显示：表小区'

没有

Answer 3

不是将CSS属性display:inline添加到<td>，而IE由于某种原因而感到满意而Chrome不是，我会更新您的JavaScript以删除display:none样式并让浏览器的默认display:table-cell生效。

在<select name="update_or_delete"> onchange方法中只需：

if(this.value=='Update') { 
  document.getElementById('ammend_contact_details').style.display='';
} else { 
  document.getElementById('ammend_contact_details').style.display='none';
}

Chrome - Colspan没有按预期工作

3 个答案: