HTML/CSS 隐藏 Table 行（无效）

Question

我有一个带有一些隐藏行的 table。但是，隐藏行似乎是在可见行的第一列内部生成的。

让我解释一下...

我有一个列出团队名称的 table。单击团队名称时，团队名称下方的隐藏行会显示团队成员名称。当我点击团队名称时，我希望 to get this, but instead I get this.

这是生成行的代码：

<script type="text/javascript" language="JavaScript">
function ReverseDisplay(d) {
  if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
  else { document.getElementById(d).style.display = "none"; }
}
</script>

  <tr>
    <td width=5% style="text-align:center; padding: 10px;">1</td>
    <td width= 10% style="text-align:center; padding: 10px;">M-2</td>
    <td width=40% style="text-align:left; padding: 10px;"  ><a href="javascript:ReverseDisplay('tri-384')">Engi-Nerds</a></td>
    <td width=5% style="text-align:center;">15</td>
    <td width=5% style="text-align:center;">11</td>
    <td width=5% style="text-align:center;">11</td>
    <td width=5% style="text-align:center;">3</td>
    <td width=7% style="text-align:center;">0</td>
    <td width=8% style="text-align:center;">40</td>
    <td width=10% style="text-align:center;">08:43:15</td>
  </tr>
  <tr id="tri-384" style="display:none;">
    <td width=5%></td>
    <td width=10%></td>
    <td width=40%>--Todd Rebol<br />--Chris Beers</td>
    <td colspan=7 width=45%></td>
  </tr>

有趣的是，当我从第二行删除 style="display:none;" 时，table 行显示得很好（尽管名称行不再隐藏）。

知道我错过了什么吗？

-- 编辑--

感谢 Little Santi，我现在可以正常工作了。这是一个简单的改变。我必须在我的 JS 代码中将 display = "block" 更新为 display = "table-row"。

Answer 1

您几乎做到了：只需将 display=block 更改为 display=table-row。显示布局不同

HTML/CSS 隐藏 Table 行（无效）

HTML/CSS Hidden Table Rows (not working)

html

css

html-table

rows

hidden