---
source_url: 
ingested: 2026-08-02
status: inbox
---

# post 详情页横向滚动修复：markdown 表格溢出（1.0.408）

大哥报 bug：`/ui/posts/2970/` 页面可以左右滚动（浏览器页面不应左右滚）。

## 根因
正文 markdown 渲染的 `<table>` 无宽度约束，内容宽（长 URL 列）时撑破容器：post 2970 有 34 个表格，其中一张 6 列宽表格渲染后达 **1076px**——390px 手机上溢出 798px，1440px 桌面也溢出 53px。

## 修复（全局 `static/css/markdown.css`，影响 post_detail/custom_link/public_post 三页）
- `.prose table { display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }`——GitHub markdown 官方做法，表格在**自身盒子内**横向滚动，不再撑破页面；`display:block` 不破坏列对齐（内部 thead/tbody 构成 anonymous table box）。
- `.prose table td { word-break:break-word; overflow-wrap:anywhere; }`——长 URL 断词。
- 附带修 post_detail 的 `.post-actions`（Listen/Edit/Share/Delete 按钮行）移动端溢出 33px：flex item `flex-shrink:0` 锁死 max-content，加 `max-width:100%` 让按钮换行（实测 Listen/Edit/Share 一行、Delete 换行）。

## 验证手法（本地无生产数据时）
1. `kubectl exec ... python manage.py shell` 导出该 post 的 title/summary/content 为 JSON（注意 Django 启动日志混进 stdout，取第一个 `{` 之后的内容）。
2. `update_or_create` 导入本地 dev 库。
3. Playwright 溢出检测：`document.documentElement.scrollWidth > clientWidth` 即溢出，遍历元素找 offender。
4. 修完 `kubectl exec grep` 在 pod 内确认新代码已上线（138 测试全绿）。

教训：页面可横滑先查 markdown 内容里的宽表格/长 URL，再怀疑布局代码。
