表 td colspan 不适用于带有 id 的 tr

Posted 2023-03-05

【中文标题】表 td colspan 不适用于带有 id 的 tr

【英文标题】：Table td colspan not working for tr with ids

【发布时间】：2013-11-16 01:12:08

【问题描述】：

我有一个类似于下面的表结构：

<tr>
  <td colspan="5">
    TEST
  </td>
</tr>
<tr id="abcd_<?php echo  $id; ?>" style="display: none;">
  <td colspan="5">
    <span id="hidtb_<?php echo  $id; ?>"></span>
  </td>
</tr>

表格在循环中，$id 的值发生变化。第二个tr 使用javascript 设置为display : block。但是<td colspan="5"> 并没有覆盖所有五个<td>s，而是只有一个。

为什么我的colspan 不起作用？

【问题讨论】：

html 似乎是正确的。它应该可以工作。

@SureshKamrushi：它不起作用，请参阅下面的答案...

@Legionar：很好的答案。但恐怕它支持所有浏览器？

@SureshKamrushi：至少在 firefox 和 safari 中，display: block 对于tr 会有问题。

这与 Javascript 或 AJAX 有什么关系？如果您使用固定标记，这是否有效？那么这毕竟与PHP无关

【参考方案1】：

这是display: block 的问题。

请参考以下链接 http://thedesignspace.net/MT2archives/000376.html#.UUrg3FfCd1u

如果您隐藏tr，则使用display: table-row 而不是display: block 来显示tr。

如果您隐藏td，则使用display: table-cell 而不是display: block 来显示td。

在设置tr 的样式时使用table-row，而不是block。完美！

【讨论】：

感谢军团..工作得很好。在您的答案中也将tabel 更改为table。大声笑

我将display: block 添加到<TR> 以使page-break-after: always; 工作。这当然会使colspan 无用。将其更改为 display: table-row 修复了 colspan 问题，但不允许分页符。不是针对这个问题，但我想让你知道这个解决方案可能会产生其他后果。