只能在<td>或<th>内嵌套<ul><ol>，因<tr>只允许<td><th>为子元素；错误嵌套会导致DOM被浏览器修正、样式失效、列表错位；嵌套需注意可访问性、缩进控制、编号连续性及与子表格的渲染冲突。
不能在 <table> 里直接嵌套列表实现“多级表格”，但可以在 <td> 或 <th> 内部合法嵌套 <ul>、<ol>，这是唯一稳定、语义正确的方式。
为什么不能把 <ul> 或 <ol> 直接写在 <tr> 下
<tr> 的子元素只能是 <td> 或 <th>。如果你写成这样：
<tr> <ul><li>A</li></ul> </tr>
浏览器会自动修正 DOM：把 <ul> “踢”出 <tr>，可能塞到整个 <table> 外面，或丢进隐式 <tbody>。结果就是：
-
document.querySelector('tr ul')返回null - CSS 中的
tr > ul完全不生效 - 列表显示在表格上方/下方，而非目标行内
<td> 里嵌套多级列表的写法与样式控制
真正能用的位置只有一个：<td> 或 <th> 的内容区域。嵌套本身没有层级限制，但需注意可访问性和缩进逻辑：
立即学习“前端免费学习笔记（深入）”；
- 每层
<ol>或<ul>必须完整包裹在上一层的<li>内部，不能并列放在同一<td>下 - 浏览器默认对嵌套列表加缩进（靠
margin-left），但不同浏览器缩进值不一致；建议用 CSS 显式控制：ul, ol { margin: 0; padding-left: 1.5em; } - 若需编号连续（如 A. → 1. → a.），必须手动为每层指定
type属性：<ol type="A">→<ol type="1">→<ol type="a"> - 超过三层嵌套后，屏幕阅读器可能无法准确播报层级；建议用
<dl>替代，或拆分为独立区块
嵌套列表和嵌套表格混用时的常见冲突
当一个 <td> 同时包含子表格和多级列表（比如明细行里既有步骤说明又有数据子表），容易触发两类问题：
-
border-collapse: collapse从父表继承到子表，导致子表边框消失或错位；必须给子表显式设border-collapse: separate - 列表项的默认
display: list-item和表格单元格的display: table-cell在某些旧版渲染引擎中存在盒模型冲突；推荐给<td>加vertical-align: top统一基线 - 如果用
colspan合并了单元格再往里塞多级列表，注意列表内容高度可能撑开整行——此时应避免给<tr>设固定height，改用min-height
真正难的不是怎么写嵌套，而是判断该不该嵌套。多数所谓“复杂单元格内容”，其实更适合用 <details><summary> 折叠，或抽离为独立组件加载，而不是硬塞进 <td> 里堆砌结构。
