必须用table-layout: fixed锁死列宽并配合width: 100%、显式定义宽度、外层div加overflow-x: auto，才能实现超宽表格可控滚动；同时需按字段类型差异化设置word-break、white-space及sticky表头样式。
超宽表格在管理系统中几乎必然出现——字段一多，横向滚动就成常态；强行缩列，用户看不清数据；全屏铺开，小屏设备直接失控。核心解法不是“让它不滚动”，而是“让滚动可控、可预期、不破坏操作流”。
用 table-layout: fixed 锁死列宽，别依赖内容撑开
默认的 table-layout: auto 是罪魁祸首：地址字段、JSON字符串、无空格 URL 一进来，整列就崩，后续列全被挤跑。必须显式启用固定布局：
<table style="table-layout: fixed; width: 100%;"> 是前提，缺一不可 <li> <code><colgroup></colgroup>必须紧贴<table> 开始后、<code><thead> 前，顺序错就失效 <li> <code><col>宽度只能用百分比（如width: 20%）或像素（如width: 160px），1fr在纯 HTML 表格里无效- 最后一列建议留空或设
width: auto，吃掉剩余空间，避免因四舍五入导致总宽溢出 <table> 设 <code>width: 100%和table-layout: fixed- 给
.table-wrapper加overflow-x: auto，并确保white-space: nowrap不误伤单元格内换行 - 移动端可加
@media (max-width: 768px) { .table-wrapper { overflow-x: scroll; -webkit-overflow-scrolling: touch; } }提升滑动手感 - 只在对应
<col>上加style="word-break: break-word;"，比如地名列、备注列 - 数值列统一加
style="white-space: nowrap; text-align: right;"，防断行错位 - 若列内含
<input>或<select></select>，word-break对它们无效，得靠max-width和padding控制容器宽度 - 禁用
word-break: break-all——它会把“上海市”拆成“上/海/市”，阅读成本陡增 <thead> 必须加 <code>position: sticky; top: 0; background: #fff; z-index: 10;- 所有
<tr> 设固定 <code>height: 48px或line-height: 48px，禁用vertical-align: baseline（默认值），改用vertical-align: middle - 避免在
<th> 或 <code><td> 里用 <code>font-size: 14px以下，小字号+折行易引发渲染错位 - 若表格在 modal 或 tab 里动态渲染，确保 DOM 挂载完成后再触发滚动监听，否则
sticky可能失灵
外层容器加 max-width + 水平滚动控制
max-width 直接写在 <table> 上基本没用——它只约束外框，不干预内部列分配。真正生效的是三层嵌套：
<ul><li>最外层用 <code><div class="table-wrapper"> 包裹，设 <code>max-width: 1200px 和 margin: 0 auto
长文本列必须配 word-break: break-word，但别全局乱加
中文地址、描述类字段需要折行，但数值、编码、ID 列必须保持完整显示，否则对齐错乱、小数点偏移：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
表头 sticky 要配合固定行高和 z-index
滚动时表头消失、点击高亮偏移，90% 是因为行高浮动或层级错乱：
真正难的不是让表格第一次不溢出，而是当字段从 8 列扩到 15 列、支持导出 PDF、还要适配折叠屏设备时，colgroup 的宽度定义是否还稳定——这时候再补媒体查询或 JS 重算就晚了，初始结构就得预留至少 20% 的宽度余量。
