Welcome to Software Development on Codidact!
Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.
How to morph a table into a list when its content wraps?
Currently, I have short key-value structures rendered as <table>s:
This isn't ideal when the content wraps, because it wastes space, as the “Experience” section of the undermentioned, cringeworthy example demonstrates:
Consequently, when the content wraps, I want to automatically have every <tr> of the key-value-style tables be replaced with an <h2> (I use solely h2s, and style all of h[2:6] as 1em, in order to work around github.com/whatwg/html/issues/7390), 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 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 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, 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:
-
Existent ECMAScript tree table libraries exist, and:
-
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. 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, 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).
2 answers
I'll second and elaborate on Michael's response, seems like you should just be using <dl>s exclusively for the rendering. You can use CSS to put some display: grid styling on that to make them render like a table, except for the "Experience" field. Me, I'd probably just render it like...
<dl>
<dt>Organization:</dt>
<dd>Fairphone B.V</dd>
<dt>Duration:</dt>
<dd>193 Days - 2024-04 to present</dd>
<dt>Experience:</td>
<dd class="large">I provide support assistance to users in and outside my designated region of responsibility. Alongside this, I provide technical assistance to operating system (postmarketOS) developers who wish to render previously obsolete hardware usable again, in order to reduce the ecological effect of obsolete technology.</dd>
</dl>
dl {
display: grid;
grid-template-columns: 1fr 1fr;
}
dd.large {
grid-column: 1/3;
}
I'm not away of any strategy you could use to CHANGE how it renders, depending on how long the text is.
Does this not seem like a good place for description lists? You're a usecase mentioned explicitly in Mozilla Developer Network's docs for the <dl> element.
Then, you can use whatever CSS you want to for arranging items side-by-side with enough space and shifting them to above/below on narrow screens.
0 comment threads
0 comment threads