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.

Post History

60%

+1 −0

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

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 the...

posted 11mo ago by JakenVeina‭ · edited 11mo ago by Michael‭

Answer

#2: Post edited by

Michael‭ · 2025-10-12T05:35:02Z (11 months ago)
Fix markdown rendering html literally

Copy Link

Raw

Markdown

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...
```html
<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>
```
```css
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.

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...
```html
<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>
```
```css
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.

#1: Initial revision by

JakenVeina‭ · 2025-10-10T23:08:25Z (11 months ago)

Copy Link

Raw

Markdown

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...

```html
<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>
```

```css
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.

Communities

Post History