HTML表格在不动产登记系统中的地籍信息多级排列方案-html教程-PHP中文网

地籍信息不能直接用嵌套实现多级展开，因为浏览器原生不支持行内折叠、列对齐强制严格、跨级展示会破坏语义与无障碍访问，且导出excel易错位；应改用语义化列表嵌套+css模拟表格，并扁平化数据导出。

html表格在不动产登记系统中的地籍信息多级排列方案

地籍信息为什么不能直接用 `<table> 嵌套实现多级展开 <p>因为浏览器原生 <code><table> 不支持行内折叠/动态展开，<code><tr> 必须严格对齐列数，一旦某行跨多级（比如宗地→地块→界址点），强行用 <code><colspan></colspan>` 或隐藏行会破坏语义、干扰屏幕阅读器，且排序、筛选、导出 Excel 时极易错位。
真实业务中常见“宗地-子宗地-图斑-界址点”四级结构，每级有不同字段（如宗地含权利人，界址点含坐标），硬套表格会导致 DOM 层级混乱、JS 控制成本陡增。

用 `<table> 做多级缩进，需手动计算 <code><td colspan> 和空单元格，后续增删级数就得重写全部 HTML <li>导出为 Excel 时，合并单元格会被 Office 解析为单格，界址点坐标可能被吞掉</li> <li>无障碍访问（如读屏软件）无法识别“这是第几级”，<code>aria-level` 在 `<tr> 上无效 <h3>用 <code><details><summary></summary></details>` 模拟可折叠层级，但要注意 DOM 结构约束

<details></details> 是语义化折叠容器，天然支持键盘操作（Space/Enter 展开），比 JS 手动 toggle 更可靠。但它不能直接塞进 <table>——HTML 规范禁止 <code><details></details> 作为 <tr> 的子元素。 <p>正确做法是放弃纯表格布局，改用语义化列表嵌套，再用 CSS 模拟表格对齐：</p> <pre class="brush:php;toolbar:false;"></pre> <ul class="cadastral-tree"> <li> <details><summary>宗地编号：GD2023001</summary><ul> <li>权利人：张三</li> <li>面积：125.6㎡</li> <li> <details><summary>子宗地：GD2023001-01</summary><ul> <li>用途：住宅</li> <li> <details><summary>界址点（3个）</summary><table> <tr> <th>序号</th> <th>X</th> <th>Y</th> </tr> <tr> <td>1</td> <td>123.45</td> <td>678.90</td> </tr> </table></details> </li> </ul></details> </li> </ul></details> </li> </ul> <ul><li>最外层用 <code><ul></ul> 而非 <table>，保证 <code><details></details> 合法嵌套

仅在最末级（如界址点坐标表）才用

<table>，此时无折叠需求，纯数据展示
<li>用 CSS 的 <code>display: grid

或 display: table-cell 模拟列对齐，避免

<table> 的语义污染


<h3>导出 Excel 时如何保持多级结构不塌陷</h3>
<p>用户点击“导出”后，Excel 里必须能看清层级关系（比如宗地行前有 2 个空格，子宗地前有 4 个空格），而不是所有数据挤成一列。</p>
<p>关键不是生成 HTML 表格，而是构造带缩进的二维数组，再交给 SheetJS（<code>xlsx

）写入：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

const data = [
  ["", "宗地编号", "GD2023001"],
  ["", "权利人", "张三"],
  ["  ", "子宗地", "GD2023001-01"],
  ["  ", "用途", "住宅"],
  ["    ", "界址点1", "X=123.45, Y=678.90"],
];

用字符串空格控制 Excel 中的缩进，SheetJS 会原样保留
避免用 colspan 或合并单元格，Excel 合并后无法排序、筛选
如果必须用真实表格导出，先用 JS 把嵌套结构扁平化为带 level 字段的数组，再按 level 插入空格

IE11 兼容方案：不用 `<details></details>` 时怎么降级

不动产系统常需支持 IE11，而 <details></details> 在 IE 中完全无效。此时必须用 JS 控制显隐，并确保键盘导航仍可用。

核心是用 aria-expanded 和 tabindex 模拟原生行为：

<button aria-expanded="false" tabindex="0">宗地编号：GD2023001</button>
<div class="collapsible-content" aria-hidden="true">...</div>

点击按钮时切换 aria-expanded 和 aria-hidden，同时用 focus() 确保键盘用户能进入内容区
按 Enter/Space 键触发展开，不要只监听 click
CSS 用 max-height + overflow: hidden 实现动画，避免 display: none 导致屏幕阅读器跳过

多级嵌套的复杂度集中在数据建模——把地籍实体抽象为树形结构（parent_id、level、is_leaf），渲染和导出逻辑才能解耦。实际落地时，最易被忽略的是界址点坐标的精度保留（必须用字符串存储，避免 JS 浮点数截断），以及导出后 Excel 单元格格式是否设为“文本”而非“常规”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！

HTML表格在不动产登记系统中的地籍信息多级排列方案

IE11 兼容方案：不用 <details></details> 时怎么降级

IE11 兼容方案：不用 `<details></details>` 时怎么降级