2017-07-28 3 views
0

私は、テーブル内の行全体を隠し、拡大する詳細タグを使用したいと思いますので、私は、現在のコード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> 

詳細タグを拡張する場合、それは「隠された」行を生成しますが、1つでを持っています元のテーブルの3列全体ではなく、

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

は誰もこの問題accrossに来て、それを解決するために管理している私は、行の内側にタグを入れて試してみましたが、私は同じ問題accross来ますか?

+2

あなたは**必須**基本的なテーブル構造を維持します。 「」、「」、「」または「

」には「」のみ、「」には「​​」または「
」のみが含まれます。他の方法はありません。おそらく '
'要素に全く新しいテーブルをラップする必要があります。そうしないと、JavaScriptでそれを行う必要があります。 – Xufox

答えて

0

場所あなたが新しい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>

+0

これは現在、私が得た最高のものです。コンテンツ1,2,3の直下に行を追加するのではなく、別のテーブルを作成します。 –

関連する問題