Post History

How to morph a table into a list when its content wraps?

Currently, I have short key-value structures rendered as `<table>`s:

![`Image_alt_text`](https://software.codidact.com/uploads/7fzw3ztqswcaw5mc92lzzif2rl9j)

This isn't ideal when the content wraps, because it wastes space:

![`Image_alt_text`](https://software.codidact.com/uploads/61iw0u7szbd77a2d216buxayj7zs)

Consequently, when the content wraps, I want to automatically have every `<tr>` of the key-value-style `table`s be replaced with an `<h2>` (I use solely `h2`s, and style all of `h[2:6]` as `1em`, in order to work around [`github.com/whatwg/html/issues/7390`](https://github.com/whatwg/html/issues/7390#event-1789530212)), containing its correspondent `<th>`'s values, underneath which shall be the content of the `<td>`s' values, thereby converting it from:

~~~
Heading Two:   Content content content.
Heading Three: Content content content.
~~~

...to:

~~~
Heading Two:
  Content content content.
Heading Three:
  Content content content.
~~~

Because this shall require nested values, I don't know whether [`github.com/facebook/lexical/issues/2951`](https://github.com/facebook/lexical/issues/2951#issuecomment-1397686562) makes this infeasible. As you may notice in the two aforecited example screenshots, I have tried both `<div class="indentation">`s (with `.indentation { margin-left: 2em; }`) and `<ol><li>`s containing an `h2` and `p` each, and am erring on the indentation-`div` method until [`github.com/whatwg/html/issues/8751`](https://github.com/whatwg/html/issues/8751#issuecomment-2676253060) has been implemented, but I'll accept whatever solution exists.

However, even if this solely works visually (if standard semantics must be violated), I'll at least attempt to implement [`software.codidact.com/posts/294526/294537`](https://software.codidact.com/posts/294526/294537#answer-294537), to provide a way for those who use screen readers to understand (though, an inconvenient method).

I presume that I shall require a preprocessor, unless some seriously advanced HTML5 + CSS3 combinations exist that I do not know of. If so, ideally, I want this to be achievable in client-side ECMAScript, because I do not want to run a server in order to view my documents.

#### Potential Alternatives

A tree table, that removes its borders when not wrapped, might also solve this (and might sole it better), especially because:

1. Existent ECMAScript tree table libraries exist, and:

1. Overriding any present-by-default border might merely be a matter of implementing an override in CSS.

I did ask about this some time ago, back before I even knew what CSS was, at [`reddit.com/r/HTML/comments/1cej7at/comment/l1mi8vd`](https://www.reddit.com/r/HTML/comments/1cej7at/comment/l1mi8vd/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button). However, because of the erroneous premise of my question (that HTML5 alone is capable of rendering a tree table), I didn't appear to receive actionable answers.

#### Tangential Context

Although I initially considered requesting this at [`github.com/whatwg/html/issues/new?template=1-new-feature.yml`](https://github.com/whatwg/html/issues/new?template=1-new-feature.yml), I want to ensure that I understand how it can currently be achieved before proposing that it be abstracted into a few elements (and I don't want to wait 10 years).