6

我有这个代码：

<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 个父列上的内容只进入第一列。

style="display: none"如果我删除它工作正常的属性，我已经进一步缩小了错误。每次我尝试更改显示样式或可见性样式时，Chrome 都会将所有内容放回第一列。

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

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

4

4 回答 4

10

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

于 2012-09-21T09:33:33.547 回答
3

style.display=''

适用于我的铬。

'显示：表格单元格'

才不是

于 2013-07-09T05:08:20.983 回答
2

与其将 CSS 属性添加display:inline到<td>IE 中（出于某种原因 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';
}
于 2012-09-21T09:41:43.167 回答
0

Chrome 似乎并不尊重colspan，除非它至少有 1 行与表中的列数完全匹配。我试图制作一个网格，第一行有 2 个项目，第二行有 3 个项目。对于 Firefox，这就是您所需要的：

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>

但它不适用于 Chrome 和 Edge，即使所有<td>s 都具有默认样式：display: table-cell。要修复它，您需要添加与列数完全匹配的空行，因此它最终看起来像这样：

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>

于 2021-10-13T19:27:33.220 回答