--- title: 【主题Bug示例】markdown 宽表溢出页面右侧 — 复现 + 修复建议 author: 张建宇 date: 2026-06-30 summary: markdown 文章里宽表(多列/长单元格)在桌面宽屏下最右列被推出页面右侧、无横向滚动。含复现表格、post.css 根因定位与两套修复 CSS，供后台/前端同学参考。 canonical: https://blog.sysu-sam.com/@zhangjianyu/theme-table-overflow-demo --- > **给后台 / 前端同学**：本页用 **markdown** 格式发布（`format:"markdown"`）。下面"复现区"的 6 列表格，在**桌面宽屏（窗口 ≥ ~1200px）**下，最右一列"给甲方的修改话术"会被推出页面右侧、被裁掉，且**没有出现横向滚动条**。窄窗口（≤ ~1000px）反而正常。这是主题对 markdown 表格的渲染问题，麻烦看一下 `post.css` 的表格规则。下面给了根因和建议改法。 ## 一、现象 - `format: markdown` 的文章里，**列多 / 单元格文字长**的表格，在宽屏下整页横向溢出，最右列被切出视口右边。 - 同一张表在窄窗口（≤1000px）下正常。 - 用 `format: html` 自己写整页 CSS 可以规避，但日常都是发 markdown，希望 markdown 表格本身就正常。 ## 二、复现表格（请在 1440px 左右宽窗口看最右列是否被切） | # | 条款 | 来源 | 核心问题 | 量化敞口 | 给甲方的修改话术 | |---|---|---|---|---|---| | 1 | 违约责任·延期违约金（第12.3款） | 模＋填 条款是模板，20%／日是甲方填的 | 延期每日罚合同总价 20% | 1 日罚 22.58 万；5 日≈合同全价；10 日达 200% | 改为"每延期一日按对应里程碑款项 0.5‰、累计不超过该里程碑款 5%；因甲方延迟提供船型资料／验收／变更导致的延期，工期顺延不计违约" | | 2 | 责任限制·例外清单（第18.1款） | 模 模板可选条款，甲方选用、150%为模板例图 | 150% 名义封顶被 8 类例外架空，质保／权利保证／保障／重大过失全部无限责任 | 169.35 万封顶形同虚设 | 上限降至 100%、将质量保证纳入封顶内；例外仅留"欺诈、故意、法定人身伤亡"，删"重大过失"；增加"本限制同等适用于甲方" | | 3 | 甲方逾期付款救济（第12.5款） | 模＋填 条款是模板，30 日／20%封顶是甲方填的 | 乙方先催款＋30 日宽限才计息、利息封顶应付款 20% | 甲方拖欠需 6 年以上才触顶，与乙方每日 20% 相差约 1300 倍 | 到期次日起算、利率与乙方违约金对称、删 20% 封顶与"全部责任"措辞 | ## 三、根因（当前 `post.css` 的表格规则） ```css .markdown-body table { display: block; width: max-content; /* 表按"不换行"的最大宽度撑开 */ max-width: min(calc(100vw - 4rem), 1200px); overflow-x: auto; border-collapse: collapse; } .markdown-body th, .markdown-body td { word-break: normal; /* 关键：单元格不换行 */ overflow-wrap: normal; /* 关键：长内容不折行 */ } ``` `width: max-content` + 单元格 `word-break/overflow-wrap: normal` ⇒ 表格按"所有单元格都不换行"的总宽度去撑。虽然有 `max-width` 和 `overflow-x: auto`，但实测（1440px 视口、内联主题 CSS 复现）表格右边界到 **1520px**、超出视口且未形成内部横向滚动，最右列被裁。 ## 四、建议改法（二选一） **方案 1（推荐，让单元格换行——最省事）** ```css .markdown-body th, .markdown-body td { word-break: break-word; overflow-wrap: anywhere; } .markdown-body table { width: 100%; table-layout: fixed; /* 列等分，长文本在格内换行，整表不超出正文列 */ } ``` **方案 2（保留"不换行 + 横向滚动"的设计，但修正溢出）** 保持单元格不换行，但确保表格被一个真正限宽的滚动容器约束、不再用 `width:max-content` 撑破父级： ```css .markdown-body table { display: block; width: 100%; /* 不再 max-content */ max-width: 100%; overflow-x: auto; /* 内容超宽时在表内横向滚动，不顶出页面 */ } ``` > 补充：本博客 markdown 渲染会把正文里的原始 HTML（`