Using html details/summary element with table

Question

I'm trying to use the html details/summary element with a table inside. However, when using a table inside the summary element, the summary and the summary marker are not displayed in the same row anymore.

<!DOCTYPE html>
<html>
<body>

<h1>The summary element with a table</h1>

<h2>Default</h2>

Without setting the display style, the summary line is broken into 2 lines.
<p />

<details>
  <summary>
    <table><tbody><tr><td>Need</td><td>table</td><td>here</td></tr></tbody></table>
  </summary>
    <details>
      <summary>
        <table><tbody><tr><td>And</td><td>also</td><td>here</td></tr></tbody></table>
      </summary>  
      Some explanation here.
  </details>
  
</details>

<h2>Inline Block</h2>

Setting display=inline-block will remove the linebreak but also the symbol for the collapsible element.
<p />

<details>
  <summary style="display: inline-block">
    <table><tbody><tr><td>Need</td><td>table</td><td>here</td></tr></tbody></table>
  </summary>
    <details>
      <summary style="display: inline-block">
        <table><tbody><tr><td>And</td><td>also</td><td>here</td></tr></tbody></table>
      </summary>  
      Some explanation here.
  </details>
  
</details>

</body>
</html>

Is there a possibility to show the table in the same row as the summary marker and keep the summary marker working?

Only `li` are allowed to be inside `ul` https://stackoverflow.com/a/6056190/4873616. Chances are, browsers are rendering that in any possible way. — Nikita Skrebets, Jan 10 '22 at 12:20
I see, thanks for pointing this out. I have removed the list from the question as it is actually not important for that part of the question. (Still something I obviously have to solve in my original problem, though.) — Thomas, Jan 10 '22 at 12:27
Just want to point out that the question should not be closed as a duplicate. — Nikita Skrebets, Jan 10 '22 at 12:50

score 0 · Answer 1 · answered Jul 28 '22 at 18:46

To display the table inline, give it a display style of inline-table.
Don't change the display of the summary.

<h1>The summary element with a table</h1>

<h2>Default</h2>

Without setting the display style, the summary line is broken into 2 lines.

<details>
  <summary>
    <table><tbody><tr><td>Need</td><td>table</td><td>here</td></tr></tbody></table>
  </summary>
    <details>
      <summary>
        <table><tbody><tr><td>And</td><td>also</td><td>here</td></tr></tbody></table>
      </summary>  
      Some explanation here.
  </details>
  
</details>

<h2>Inline Block</h2>

Setting display=inline-table will remove the linebreak

<details>
  <summary>
    <table style="display: inline-table"><tbody><tr><td>Need</td><td>table</td><td>here</td></tr></tbody></table>
  </summary>
    <details>
      <summary>
        <table style="display: inline-table"><tbody><tr><td>And</td><td>also</td><td>here</td></tr></tbody></table>
      </summary>  
      Some explanation here.
  </details>
  
</details>

Using html details/summary element with table

1 Answers1