移动端视图下水平滚动表格右侧出现额外空白的原因排查

这个问题的核心是Pico CSS对figure内表格的默认宽度设置，在小视口下导致表格宽度计算异常，出现右侧空白。

修复方案 #

添加以下自定义CSS即可解决：

figure > table {
  width: auto;
  min-width: 100%;
}

原理说明 #

• 原Pico默认样式给表格设置了width: 100%，当表格内容总宽度超过视口时，这个强制宽度会导致表格布局出现多余空白。
• 修改为width: auto让表格宽度由内容自适应，min-width: 100%保证在内容宽度小于视口时，表格仍能占满容器，保持响应式布局。

另外，你代码中使用了Material Symbols图标但未引入对应样式，建议补充引入（可选，不影响空白问题）：

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

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