推荐使用 table-layout: fixed 配合 colgroup 显式定义列宽与 text-align，中文用 word-break: break-word，精简字段+sticky 表头优化移动端体验，统一行高防高亮错位。
表格列宽不随内容自适应，GIS属性字段被截断
GIS属性表常含长文本（如地址、描述）、数字（坐标、面积）和分类字段（地类代码、权属类型），table 默认行为会让长文本撑开列宽，破坏整体布局。别用 white-space: nowrap 强制单行——这会让中文地址直接溢出容器。
推荐做法：table-layout: fixed 配合显式列宽控制：
<table style="table-layout: fixed; width: 100%;">
<colgroup>
<col style="width: 80px"> <!-- ID -->
<col style="width: 200px"> <!-- 地名 -->
<col style="width: 120px"> <!-- 面积 -->
<col style="width: 1fr"> <!-- 描述（剩余空间）-->
</colgroup>
<tbody>
<tr><td>1</td><td>XX省XX市XX区XX街道</td><td>1245.67</td><td>该地块为商服用地，容积率≤3.5...</td></tr>
</tbody>
</table>-
table-layout: fixed让浏览器按<col>定义分配宽度，不再重算每行内容 -
1fr在支持 CSS Grid 的现代环境可用，但纯 HTML 表格中建议用百分比或像素值，1fr仅在display: grid下生效；这里写width: auto或留空更稳妥 - 中文字段用
word-break: break-word替代break-all，避免把“北京市”拆成“北/京/市”
属性字段类型混杂导致对齐混乱
数值型字段（高程、面积、坐标）需右对齐便于小数点对齐；文本类（地名、权属人）左对齐；代码类（地类编码、行政区划码）居中更易扫读。CSS text-align 按列设置比逐单元格写更可靠。
实操时直接在 <col> 上加样式：
立即学习“前端免费学习笔记（深入）”；
<col style="text-align: right"> <!-- 面积、高程列 --> <col style="text-align: left"> <!-- 地名、描述列 --> <col style="text-align: center"> <!-- 编码、状态列 -->
- 避免在
<td>内重复写style="text-align:..."，维护成本高且易漏 - 若用 JavaScript 动态渲染，给列加
class比内联样式更可控，例如<col class="col-number">对应 CSS.col-number { text-align: right; } - 注意
text-align对input或select表单控件无效，若单元格内嵌控件，需单独设text-align或用padding-left调整视觉位置
移动端表格横向滚动体验差，用户找不到关键字段
GIS属性表字段多（常超 10 列），手机上横向滚动极易误操作、难定位。不要依赖 overflow-x: auto 包裹整个 table——手指一滑就跑偏，且无滚动提示。
- 优先做字段精简：用
data-attribute存非核心字段（如“备注”“创建时间”），点击行再展开详情浮层 - 必须展示全部字段时，用
min-width限定表格最小宽度，配合overflow-x: auto套在<div>外层，并加scrollbar-gutter: stable防止滚动条出现时内容跳动 - 给表头加
position: sticky（需父容器有max-height和overflow-y: auto），确保滚动时表头始终可见
与 GIS 图形联动时，表格行高突变导致选中态错位
点击地图要素高亮对应表格行时，若该行含换行文本或动态加载的富文本（如带 <br> 的描述），行高会变化，导致高亮背景与实际行内容错位。
- 统一设
line-height: 1.4和max-height（如max-height: 3.2em对应两行），配合overflow: hidden控制高度波动 - 避免用
height固定行高——字体缩放或字号调整后内容会被裁切 - 高亮逻辑别只靠
:hover或class切换背景色，要同步检查clientHeight变化，必要时强制重绘（offsetHeight触发回流）
字段语义和视觉节奏比“看起来像专业GIS系统”更重要。用户真正卡住的，往往是地址字段换行错位、坐标小数点没对齐、或者在手机上滑了三秒才找到“权属单位”那一列——这些细节没处理好，再漂亮的配色也没用。
