嵌套列表必须置于<td>或<th>内部，否则浏览器将自动修复结构导致DOM异常；需重置ul/ol默认margin/padding，多层缩进用padding-left更稳定；JS动态插入时应优先使用DOM API而非innerHTML。
嵌套列表放在 HTML 表格里，不能直接往 <tr> 里塞 <code><ul></ul> 或 <ol></ol>，否则浏览器会把它“踢”出表格结构——你看到的可能是列表飘在表上方、JS 查不到节点、CSS 样式失效。
嵌套列表必须放在 <td> 或 <code><th> 内部
<p>这是唯一合法位置。<code><tr> 的子元素只允许是 <code><td> 或 <code><th>，其他标签（包括 <code><ul></ul>、<ol></ol>、<div>）都会触发浏览器自动修复：移出 <code><tr>、插进隐式 <code><tbody>，甚至丢弃部分 DOM 节点。
<ul><li>错误写法：<code><tr><ul><li>项1</li></ul></tr> → 列表被移出表格，DOM 中找不到父级 <tr>
<li>正确写法：<code><tr><td><ul><li>项1</li></ul></td></tr> → 列表成为单元格内容，结构可控
colspan 合并 <td>，再把列表放进去，避免视觉错位
<li>用开发者工具检查 Elements 面板，确认 <code><ul></ul> 真实嵌套在 <td> 下，而不是悬浮在 <code><table> 外
<h3>
<code><ul></ul> 和 <ol></ol> 在单元格里的默认样式问题
浏览器会给列表加默认 margin 和 padding，导致单元格内缩进过大、上下留白异常，尤其在多行数据中显得松散不齐。
- 必须重置：
td ul, td ol { margin: 0; padding: 0; }，否则和相邻单元格对不齐 - 若列表项需要垂直居中，别只调
vertical-align—— 它只作用于行内内容；得配合display: flex; align-items: center;或设line-height匹配单元格高度 - 嵌套多层列表（如
<ul><li><ul>...</ul></li></ul>）时，每层都要单独控制缩进，用padding-left替代默认的margin-left更稳定
动态插入列表时容易忽略的 DOM 结构校验
用 JS 拼接字符串或 innerHTML 插入带列表的单元格，很容易漏掉闭合标签或层级错位，导致浏览器解析出意外结构。
立即学习“前端免费学习笔记（深入）”；
- 拼接前务必确保：每个
<ul></ul>都有对应 ，每个<li>都在<ul></ul>或<ol></ol>内部 - 插入后立刻检查：
document.querySelector('td ul')是否返回预期节点；如果为null，大概率是结构被浏览器“修正”了 - 推荐用 DOM API 创建（
document.createElement('ul')+appendChild），比字符串拼接更安全，尤其在老版 Safari 或 IE 兼容场景 - 如果用模板引擎（如 Handlebars、Vue 模板），注意它可能默认转义 HTML 字符；要显式声明
{{{ rawHtml }}}或用v-html，否则<ul></ul>会被当文本渲染
最常被跳过的细节是：嵌套列表不是“放进去就行”，而是必须服从表格的语义层级——<td> 是唯一入口，<code><ul></ul> 是内容，不是布局容器。一旦越界，浏览器就接管控制权，结果不可预测。
