最稳妥的表格方案是使用 table-layout: fixed + colgroup 显式控宽，配合 word-break: break-word 折行、text-align 分列对齐、sticky 表头及固定行高，确保多列扩展与移动端兼容。
直接用 <table> 是最稳妥的信息展示方案，但默认行为会让中文地址、长描述撑开列宽，数值对不齐，移动端体验差——关键不在“会不会写表格”，而在怎么控宽、对齐和断行。
<h3>table-layout: fixed + colgroup 显式控宽</h3>
<p>浏览器默认按内容重算每列宽度，GIS字段或用户填写的长地址一进来，整列就崩。必须强制固定布局：</p>
<ul>
<li>
<code>table 标签加 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 又可能把“北京市”拆成“北/京/市”。正确做法是：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 给需要折行的
<col>加style="word-break: break-word;" - 只作用于文本类列（如地名、描述），数值列保持
white-space: nowrap防小数点错位 - 若列内含
<input>或<select></select>，word-break对它们无效，得靠padding或容器max-width控制
按数据类型分列设置 text-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>）不生效，需额外处理视觉对齐
sticky 表头与统一行高防高亮错位
滚动时表头消失、点击某行高亮却偏移——常见于动态渲染或字体加载不一致：
- 给
<thead> 加 <code>style="position: sticky; top: 0; background: #fff; z-index: 1;" - 所有
<tr> 设固定 <code>height（如48px）或line-height，避免因内容换行导致行高浮动 - 禁用
vertical-align: baseline（默认值），统一用vertical-align: middle - 移动端慎用
font-size: 16px以下，小字号+折行易引发渲染错位
真正难的不是写出第一版表格，而是当字段从 5 列扩到 12 列、支持导出 PDF、还要适配屏幕宽度小于 375px 的设备时，colgroup 和 table-layout: fixed 这两个点还是否稳定——这时候再补 min-width 或媒体查询就晚了，初始结构就得留余量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
