只能在或内嵌套，因只允许为子元素；错误嵌套会导致dom被浏览器修正、样式失效、列表错位；嵌套需注意可访问性、缩进控制、编号连续性及与子表格的渲染冲突。

不能在 <table> 里直接嵌套列表实现“多级表格”，但可以在 <code><td> 或 <code><th> 内部合法嵌套 <code><ul></ul>、<ol></ol>，这是唯一稳定、语义正确的方式。

为什么不能把 <ul></ul> 或 <ol></ol> 直接写在 <tr> 下 <p><code><tr> 的子元素只能是 <code><td> 或 <code><th>。如果你写成这样： <pre class="brush:php;toolbar:false;">&lt;tr&gt;&lt;ul&gt;&lt;li&gt;A&lt;/li&gt;&lt;/ul&gt;&lt;/tr&gt;</pre> <p>浏览器会自动修正 DOM：把 <code><ul></ul> “踢”出 <tr>，可能塞到整个 <code><table> 外面，或丢进隐式 <code><tbody>。结果就是： <ul> <li> <code>document.querySelector('tr ul') 返回 null

CSS 中的 tr > ul 完全不生效

列表显示在表格上方/下方，而非目标行内

<td> 里嵌套多级列表的写法与样式控制 <p>真正能用的位置只有一个：<code><td> 或 <code><th> 的内容区域。嵌套本身没有层级限制，但需注意可访问性和缩进逻辑： <ul><li>每层 <code><ol></ol> 或 <ul></ul> 必须完整包裹在上一层的 <li> 内部，不能并列放在同一 <td> 下 <li>浏览器默认对嵌套列表加缩进（靠 <code>margin-left），但不同浏览器缩进值不一致；建议用 CSS 显式控制：ul, ol { margin: 0; padding-left: 1.5em; }

若需编号连续（如 A. → 1. → a.），必须手动为每层指定 type 属性：<ol type="A"></ol> → <ol type="1"></ol> → <ol type="a"></ol>

超过三层嵌套后，屏幕阅读器可能无法准确播报层级；建议用 <dl></dl> 替代，或拆分为独立区块

嵌套列表和嵌套表格混用时的常见冲突

当一个 <td> 同时包含子表格和多级列表（比如明细行里既有步骤说明又有数据子表），容易触发两类问题： <ul> <li> <code>border-collapse: collapse 从父表继承到子表，导致子表边框消失或错位；必须给子表显式设 border-collapse: separate

列表项的默认 display: list-item 和表格单元格的 display: table-cell 在某些旧版渲染引擎中存在盒模型冲突；推荐给 <td> 加 <code>vertical-align: top 统一基线

如果用 colspan 合并了单元格再往里塞多级列表，注意列表内容高度可能撑开整行——此时应避免给 <tr> 设固定 <code>height，改用 min-height

真正难的不是怎么写嵌套，而是判断该不该嵌套。多数所谓“复杂单元格内容”，其实更适合用 <details><summary></summary></details> 折叠，或抽离为独立组件加载，而不是硬塞进 <td> 里堆砌结构。</td>

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

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