html - 如何使用Html5的details和summary标签隐藏和展开表格中的整行？

Question

我想使用详细信息标签来隐藏和展开表格中的整行，所以我目前有代码

           <table border="1">
                <tr>
                    <td>Header 1 </td>
                    <td>Header 2 </td>
                    <td>Header 3 </td>
                </tr>

                <tr>
                    <td>Content 1 </td>
                    <td>Content 2 </td>
                    <td>Content 3 </td>
                </tr>

                <details>
                    <tr>
                        <td>Hidden Content 1 </td>
                        <td>Hidden Content 2 </td>
                        <td>Hidden Content 3 </td>
                    </tr>
                </details>
            </table>

展开详细信息标签时，它会生成“隐藏”行，但在一列中，而不是原始表格中的整个 3 列。我也试过将标签放在行内，但我遇到了同样的问题

                    <tr><details>
                        <td>Hidden Content 1 </td>
                        <td>Hidden Content 2 </td>
                        <td>Hidden Content 3 </td>
                        </details>
                    </tr>

有没有人也遇到过这个问题并设法解决了？

Answer 1

把你想隐藏的内容放在一个新的 table 中，然后用 details 标签包裹起来:

table {
  width: 300px;
}

<table border="1">
  <tr>
    <td>Header 1 </td>
    <td>Header 2 </td>
    <td>Header 3 </td>
  </tr>

  <tr>
    <td>Content 1 </td>
    <td>Content 2 </td>
    <td>Content 3 </td>
  </tr>
</table>
<details>
  <table border="1">
    <tr>
      <td>Hidden Content 1 </td>
      <td>Hidden Content 2 </td>
      <td>Hidden Content 3 </td>
    </tr>
  </table>
</details>