如何使用Html5的細節和摘要標籤隱藏和展開表中的整行？

我想使用明細標籤隱藏在表擴大整個行，所以我現在有代碼如何使用Html5的細節和摘要標籤隱藏和展開表中的整行？

  <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>

有沒有人也都翻過這一問題，並設法解決它？

來源

2017-07-28 S.Hill

你** **必須保持基本的表結構。只有''在''，''，''或''

，只有''或''。沒有別的辦法。您可能必須在'

'元素中包裝一張全新的表格，或者您必須使用JavaScript來完成。 – Xufox

回答

將要在一個新的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>

來源

2017-07-28 15:01:23 sol

這是目前我收到的最好的。它會創建一個單獨的表格，而不是直接在內容1,2和3下方添加一行。 –

相關問題

在''