CSS表格小屏幕下左侧列被截断，如何实现全列可滚动？

我创建了一个Code Sandbox来复现我的问题：点击此处。

当屏幕宽度足够时，表格可完整显示所有列：

当屏幕宽度不足时：

此时可向右滚动查看spell slots 8和9，但左侧的class levels和proficiency bonus列被截断。我希望避免这些列被截断，如何修改才能让所有列都可滚动查看？

给表格外层套一个横向滚动容器，让整个表格在容器内滚动，就能避免左侧列被截断。具体操作：

1. 添加滚动容器样式
   在样式文件或内联样式中定义容器样式：

.table-scroll-container {
  overflow-x: auto;
  /* 可选：设置最小宽度，避免容器过度收缩 */
  min-width: 700px;
}

2. 包裹表格组件
   把你的表格放在这个容器里：

<div className="table-scroll-container">
  {/* 你的表格代码 */}
</div>

3. 检查并清理冲突样式

• 移除表格或其父元素上的overflow: hidden设置，这会阻止滚动生效
• 如果之前给左侧列加了固定定位（position: fixed），要删掉，否则列不会随滚动移动
• 确保表格单元格没有强制换行的样式（比如word-break: break-all），如果有可以设置white-space: nowrap保持内容不换行，避免列宽被挤压

这样修改后，当屏幕宽度不足时，拖动横向滚动条就能查看所有列，左侧的class levels和proficiency bonus也不会被截断。

内容的提问来源于stack exchange，提问作者Anthony Bias