I am currently working on formatting a table and I need some help figuring out how to achieve my desired layout. The issue I'm facing is with a cell that contains a large JSON object block. I want this block to either wrap within the enclosing TD, or to have its contents scroll without causing the table to exceed the screen width.
For reference, you can view an example of what I'm attempting to do in this jsfiddle:
To clarify, in the cell with colspan=4, I would like the content to be scrollable within the cell.
https://jsfiddle.net/y8gzqpv5/1/
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello, world!</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="col">
<input type="checkbox">
</th>
<th scope="col">Message ID</th>
<th scope="col">Created Date (UTC)</th>
<th scope="col" class="clickable">Message Type<span>⌃</span></th>
<th scope="col">Trace ID</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">
<input type="checkbox">
</td>
<td>64bfe115407c62030d67c3bf</td>
<td>7/25/2023 2:49:57 PM</td>
<td>MyEventType</td>
<td>5d32270e-b0a3-416c-9eb3-5e1006376850</td>
</tr>
<tr>
<td colspan="4">
<div class="overflow-scroll">
<pre>
<code class="language-json" style="overflow: auto; white-space: pre; word-wrap: break-word; white-space: break-spaces;">{
"TraceId": "5d32270e-b0a3-416c-9eb3-5e1006376850",
"Key": "6b777e8f-882e-4a53-8ba0-64eca033c13c",
"Type": "LongNameOfSomeParsedEventType",
"Payload": "{\u0022AggregateUuid\u0022:\u00226b00de8f-882e-4a53-8ba0-64eca033c13c\u0022,\u0022Version\u0022:0,\u0022ParsedDate\u0022:\u00222023-07-24T21:58:39.1822492\u002B00:00\u0022,\u0022NumberRecordsParsed\u0022:2}",
"SqsReceiptHandle": "AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzz...
</code>
</pre>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I've experimented with different scrolling, clipping, and hidden content techniques but have been unable to render it correctly.