Question

我正在尝试制作一个表格，表格的每一行都可以点击以显示/隐藏内容。我最初打算使用 CSS/JS 将其实现为可折叠的，但在 HTML 中遇到了 <details> 和 <summary> 标签，这正是我所需要的。

表格如下：

<table class="fullwidth">
  <tr>
    <td><i>Content No. 1</i></td>
    <td>Content No. 2</td>
    <td><i>Content No. 3</i></td>
  </tr>
</table>

我想让表格行中的内容（因此，包括上面的 <tr> 标签之间的所有内容）成为 <details>/<summary> 块的标题。但是，将行内容放入 <summary> 块似乎不起作用：

<table class="fullwidth">
  <details>
    <summary>
      <tr>
        <td><i>Content No. 1</i></td>
        <td>Content No. 2</td>
        <td><i>Content No. 3</i></td>
      </tr>
    </summary>
    <p>Details about the table row</p>
  </details>
</table>

我只是没有正确阅读 <details> 标签的文档吗？我喜欢这个解决方案，因为它看起来像是一种纯 HTML、无 CSS、无 JS 的方式来获得我想要的东西。我很乐意在这个问题上提供任何帮助，即使它只是让我知道我最好实施可折叠的。

带有 HTML 表格的详细信息/摘要标签？

0 个答案: