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

Question

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?

You **must** preserve the basic table structure. Only `` in ``, ``, `` or `` and only ``. There’s no other way. You probably have to wrap an entirely new table in the `
` element or you have to do it with JavaScript.
` or ` ` in ` — Sebastian Simon, Jul 28 '17 at 14:58

score 5 · Answer 1 · answered Jul 28 '17 at 15:01

Place the contents you want to hide in a new table and wrap the 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>

This is currently the best I got it. It makes a separate table instead of just adding a row directly below the content 1,2 and 3. — S.Hill, Jul 31 '17 at 07:55

zer00ne · Answer 2 · 2022-02-16T04:50:08.297

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>

score 1 · Answer 3 · answered Feb 16 '22 at 02:20

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>

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

3 Answers3