How to use Html5's details and summary tag to hide and expand an entire row in a table?

user_8382584 0
Viewed 3555

I would like to use the details tag to hide and expand an entire row in a table, so I currently have the 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 the details tag, it produces the "hidden" row but in one column instead of the entire 3 columns in the original table. I have also tried putting the tag inside the row but I come accross the same issue

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

Has anyone also come accross this problem and managed to solve it?

details-tag css html
3 Answers

It's invalid HTML to have <detail>s as a direct child to: <table>, <thead>, <tbody>, <tfoot>, <tr>. But , it's very valid to put anything in a <td>.

The following example has an expanded <td> with a colspan of "3" which makes it the only cell to occupy it's <tr> edge to edge and by all intents and purposes looks like a <details> as a <tr>. Within the <details> are three <section>s.

The <details> has display: table-row which will make behave as a <tr>. The three <section>s have display: table-cell -- they behave just like <td>. And finally, the <details> is wrapped in a <table> (believe it or not it's 100% valid HTML). The styles of the big <table> also apply to the mini <table>, note the content within three <section>s are perfectly 33/33/33. This is all HTML and CSS no JavaScript.

*, *::before, *::after { box-sizing: border-box; }
:root { font: 1ch/1 'Segoe UI'; }
html, body { width: 100%; min-height: 100%; margin: 0; padding: 0; }
body { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; font-size: 1.75rem; }
main { width: 100%; height: 100%; margin: 0 auto; }
table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 2px inset grey; }
th, td { width: 33%; height: 30px; border: 1px solid black; }
caption, th { font-variant: small-caps; }
caption { font-size: 2.5rem; font-weight: 900; }
td::before, td::after { content: '\0a\0a\0a'; }
details { display: table-row; }
summary { font-weight: 700; cursor: pointer; }
section { display: table-cell; width: 33%; padding: 5px 3px; border: 1px solid black; }
<main>
<table>
<caption>Data Table</caption>
<thead><tr>
<th>Alpha</th>
<th>Beta</th>
<th>Gamma</th>
</tr></thead>
<tbody>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td colspan='3'>
<table>
<details>
  <summary>More Nfo</summary>
  <section>
  Ierd lait Klarinett vu rou. Vu der Benn aremt, mä ons Halm alles Minutt. De fond rëschten schaddreg rëm. Sou un stét esou, vun fu ma'n Mier gréng. Keng schéi Gaart wee de, nei ké Ierd löschteg.
  </section>
  <section>
  Net d'Leit iwerall schnéiwäiss de, nei main jeitzt hu. Mä Haus stét vun, as Blieder d'Kirmes dir, un frou Säiten laanscht wéi.
  </section>
  <section>
An kille zielen dämpen och. Hun Dall Mecht Klarinett da, dan Fuesent d'Blumme schaddreg um, all vill Gaas Hierz an. Wou d'Sonn d'Vullen hu. Mir Kënnt d'Gaassen un, wéi um botze d'Pied heescht. 
</section>
</details>
</table>
</td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</tbody>
<tfoot>
<tr><td></td><td></td><td></td></tr>
</tfoot>
</table>
</main>

user_28132240

I Added a summary tag to the code and seems to work.

table {
  width: 300px;
}
<table border="1">
  <tr>
    <td>
      <details>
        <summary>Header 1</summary>
        Hidden Content 1
      </details>
    </td>
    <td>
      <details>
        <summary>Header 2</summary>
        Hidden Content 2
      </details>
    </td>
    <td>
      <details>
        <summary>Header 3</summary>
        Hidden Content 3
      </details>
    </td>
  </tr>
</table>

user_177512310
Related