html - How to use Html5's details and summary tag to hide and expand an entire row in a table? -
i use details tag hide , expand entire row in table, have code
<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>
when expanding details tag, produces "hidden" row in 1 column instead of entire 3 columns in original table. have tried putting tag inside row come accross same issue
<tr><details> <td>hidden content 1 </td> <td>hidden content 2 </td> <td>hidden content 3 </td> </details> </tr>
has come accross problem , managed solve it?
place contents want hide in new table
, wrap details
tag around that:
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>
Comments
Post a Comment