我试图弄清楚我需要什么才能像我期望的那样格式化这个表。我有一个单元格有一个大的块（JSON对象）。我希望该块可以换行以适应所包含的TD，或者在不导致表增长超过屏幕宽度的情况下滚动该TD的内容。
这里有一个jsfiddle展示了我正在做的一个例子。
我希望colspan=4的单元格的内容可以在单元格内滚动。
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": "AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002AQEzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzI002/Hfj8nST"
}</code>
</pre>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>字符串
尝试了一些滚动/剪切/隐藏内容的变体，但无法正确呈现。
1条答案
按热度按时间wmvff8tz1#
您需要做的就是像下面这样更改表格布局：
字符串
fixed布局确保表格不超过您指定的宽度（100%）。你可以阅读更多关于它on MDN。这里是updated fiddle