我想在表中添加一个水平滚动的div。然而，这只会让桌子变得更宽。它将在各种上下文中重复使用，而不仅仅是表，所以我不能依赖于表的样式来使它工作。正如您在下面看到的，代码块在独立时是可以滚动的，但当我把它放在表单元格中时，它就会中断。
如何在所有情况下使其水平滚动？
<html>
<head>
<style>
.monospace {
background-color: #efebeb;
border-radius: 4px;
padding: 4px;
overflow-x: scroll;
white-space: nowrap;
}
.container {
display: flex;
flex-direction: row;
max-width: 100%;
}
.monospace {
flex: 1;
flex-basis: 0;
}
.icon {
flex: 0;
flex-basis: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="monospace">eyJraWQiOiJzZXNzaW9uLXNlcnZpY2VcL3Byb2QtMTU5Mjg1ODM5NCIsImFsZyI6IlJTMjU2In0eyJraWQiOiJzZXNzaW9uLXNlcnZpY2VcL3Byb2QtMTU5Mjg1ODM5NCIsImFsZyI6IlJTMjU2In0eyJraWQiOiJzZXNzaW9uLXNlcnZpY2VcL3Byb2QtMTU5Mjg1ODM5NCIsImFsZyI6IlJTMjU2In0eyJraWQiOiJzZXNzaW9uLXNlcnZpY2VcL3Byb2QtMTU5Mjg1ODM5NCIsImFsZyI6IlJTMjU2In0eyJraWQiOiJzZXNzaW9uLXNlcnZpY2VcL3Byb2QtMTU5Mjg1ODM5NCIsImFsZyI6IlJTMjU2In0</div>
<div class="icon">X</div>
</div>
<table>
<tbody>
<tr>
<td>
<div class="container">
<div class="monospace">eyJraWQiOiJzZXNzaW9uLXNlcnZpY2VcL3Byb2QtMTU5Mjg1ODM5NCIsImFsZyI6IlJTMjU2In0eyJraWQiOiJzZXNzaW9uLXNlcnZpY2VcL3Byb2QtMTU5Mjg1ODM5NCIsImFsZyI6IlJTMjU2In0eyJraWQiOiJzZXNzaW9uLXNlcnZpY2VcL3Byb2QtMTU5Mjg1ODM5NCIsImFsZyI6IlJTMjU2In0eyJraWQiOiJzZXNzaW9uLXNlcnZpY2VcL3Byb2QtMTU5Mjg1ODM5NCIsImFsZyI6IlJTMjU2In0eyJraWQiOiJzZXNzaW9uLXNlcnZpY2VcL3Byb2QtMTU5Mjg1ODM5NCIsImFsZyI6IlJTMjU2In0</div>
<div class="icon">X</div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>您需要指定元素的宽度。但除非设置table-layout: fixed，否则表将不接受宽度。这是一个工作演示：
.monospace {
background-color: #efebeb;
border-radius: 4px;
padding: 4px;
overflow-x: scroll;
white-space: nowrap;
width:100%;
}
table{
width: 100%;
table-layout: fixed;
}<div class="monospace">eyJ2UjMTJlI6IyZsFmIsICN5MDO1gjM5UTMtQ2byB3LcV2YpZnclNXLu9WazNXZzJiOiQWarJye0nI2UjMTJlI6IyZsFmIsICN5MDO1gjM5UTMtQ2byB3LcV2YpZnclNXLu9WazNXZzJiOiQWarJye0nI2UjMTJlI6IyZsFmIsICN5MDO1gjM5UTMtQ2byB3LcV2YpZnclNXLu9WazNXZzJiOiQWarJye0nI2UjMTJlI6IyZsFmIsICN5MDO1gjM5UTMtQ2byB3LcV2YpZnclNXLu9WazNXZzJiOiQWarJye0nI2UjMTJlI6IyZsFmIsICN5MDO1gjM5UTMtQ2byB3LcV2YpZnclNXLu9WazNXZzJiOiQWarIn0</div>
<table>
<tbody>
<tr>
<td>
<div class="monospace">eyJ2UjMTJlI6IyZsFmIsICN5MDO1gjM5UTMtQ2byB3LcV2YpZnclNXLu9WazNXZzJiOiQWarJye0nI2UjMTJlI6IyZsFmIsICN5MDO1gjM5UTMtQ2byB3LcV2YpZnclNXLu9WazNXZzJiOiQWarJye0nI2UjMTJlI6IyZsFmIsICN5MDO1gjM5UTMtQ2byB3LcV2YpZnclNXLu9WazNXZzJiOiQWarJye0nI2UjMTJlI6IyZsFmIsICN5MDO1gjM5UTMtQ2byB3LcV2YpZnclNXLu9WazNXZzJiOiQWarJye0nI2UjMTJlI6IyZsFmIsICN5MDO1gjM5UTMtQ2byB3LcV2YpZnclNXLu9WazNXZzJiOiQWarIn0</div>
</td>
</tr>
</tbody>
</table>