最稳妥的表格方案是使用配合table-layout: fixed和显式控宽，通过word-break: break-word处理中文换行、text-align按数据类型分设对齐方式，并用position: sticky实现表头固定与统一行高保障滚动体验。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
直接用 <table> 是最稳妥的方案，但默认行为会让中文地址、长描述撑开列宽，数值对不齐，移动端体验差——关键不在“会不会写表格”，而在怎么控宽、对齐和断行。
<h3>table-layout: fixed + colgroup 显式控宽</h3>
<p>浏览器默认按内容重算每列宽度，GIS字段或用户填写的长地址一进来，整列就崩。必须强制固定布局：</p>
<ul><li><code><table> 标签加 <code>style="table-layout: fixed; width: 100%;"
<colgroup></colgroup> 显式定义每列宽度，<col> 不占 DOM，性能好且样式干净1fr：纯 HTML 表格中 width: 1fr 无效，改用百分比（如 width: 25%）或像素值（如 width: 160px）width: auto 或留空，让它吃掉剩余空间word-break: break-word 控制中文换行
white-space: nowrap 会把“XX省XX市XX区”整个挤出容器；word-break: break-all 又可能把“北京市”拆成“北/京/市”。正确做法是：
- 给需要折行的
<col>加style="word-break: break-word;" - 只作用于文本类列（如地名、描述），数值列保持
white-space: nowrap防小数点错位 - 若列内含
<input>或<select></select>，word-break对它们无效，得靠padding或容器max-width控制
text-align 和 vertical-align 按数据类型分设
数值右对齐、文本左对齐、编码居中——别在每个 <td> 里重复写 <code>style：
立即学习“前端免费学习笔记（深入）”；
- 在
<col>上直接加text-align，例如：<col style="text-align: right">（面积、高程列） - 用
class更可控：<col class="col-number">+ CSS.col-number { text-align: right; } -
text-align对表单控件（<input>,<select></select>）不生效，需额外处理视觉对齐 - 禁用
vertical-align: baseline（默认值），统一用vertical-align: middle
sticky 表头与固定行高防高亮错位
滚动时表头消失、点击某行高亮却偏移——常见于动态渲染或字体加载不一致：
- 给
<thead> 加 <code>style="position: sticky; top: 0; background: #fff; z-index: 1;" - 所有
<tr> 设固定 <code>height（如48px）或line-height，避免因内容换行导致行高浮动 - 移动端慎用
font-size: 16px以下，小字号 + 折行易引发渲染错位
真正难的不是写出第一版表格，而是当字段从 5 列扩到 12 列、支持导出 PDF、还要适配屏幕宽度小于 375px 的设备时，colgroup 和 table-layout: fixed 这两个点还是否稳定——这时候再补 min-width 或媒体查询就晚了，初始结构就得留余量。
