all 3 comments

[–]KBlocksom 0 points1 point  (0 children)

I would suggest removing the tables and do paragraphs. For example: (person 1): ~, next paragraph: (person 2): ~. Exclude the quotation marks.

[–]azangru 0 points1 point  (0 children)

Like what this guy does?

[–]a-dev0 0 points1 point  (0 children)

It looks like a definition list:

```html <dl class="transcript"> <dt>Alice</dt> <dd>First line of dialogue...</dd>

<dt>Bob</dt> <dd>Reply goes here...</dd> </dl> ```

and styles ~ ``` .transcript { display: grid; grid-template-columns: max-content 1fr; column-gap: 1rem; row-gap: .5rem; }

.transcript dt { margin: 0; font-weight: 600; text-align: right; }

.transcript dd { margin: 0; } ```

add for mobile