分页控件必须置于tbody外部，推荐紧贴后或用独立容器包裹表格与分页器；塞入内部（如和之间）会导致dom结构非法，浏览器纠错后易破坏样式流和事件绑定。
表格分页控件必须放在 tbody 外部，不能塞进表格内部
常见错误是把分页 div 写在 <table> 里，比如插在 <code> 和
之间。这会导致 DOM 结构非法，浏览器自动纠错后可能破坏样式流或事件绑定。
正确位置只有两个：紧贴 后（推荐），或用独立容器包裹整个表格+分页器。例如：
| Name |
|---|
- 分页容器不能是
<td> 或 <code><tr> 的子元素<li>如果用 Flex/Grid 布局整体控制，分页器需和 <code><table> 同级，再用父容器统一对齐<li>避免给分页器设 <code>display: table-caption—— 它只对<caption></caption>生效，且语义不符 - 检查表格最外层包裹元素是否带
overflow，特别是用了max-height+overflow-y: auto的场景 - 若需表格可滚动而分页器吸底，应把分页器提到滚动容器之外，例如：
<div class="scroll-wrapper">...</div> <div id="pagination">...</div> -
position: sticky的bottom: 0需要父容器有明确高度，否则退化为 static
tfoot 不适合放分页，它不是“底部区域”的通用占位符
有人尝试把分页写进 <tfoot>，认为“脚”就该在底部。但 <code><tfoot> 是语义化标签，专用于表格汇总行（如合计、平均值），会被读屏器识别为数据摘要，且在打印时可能重复出现在每页末尾。<p>更关键的是：现代 CSS（尤其是 <code>position: sticky 或 Flex 排列）对 <tfoot> 的控制远不如独立 <code>div 灵活。一旦表格高度变化或启用虚拟滚动，<tfoot> 容易错位或被截断。<ul><li>若坚持用表格原生结构，<code><caption></caption> 只能放标题，<tfoot> 只放统计行<li>分页属于 UI 控制层，和数据无关，应与表格解耦</li>
<li>用 <code>margin-top: 16px 或 flex-direction: column 控制间距比依赖 <tfoot> 更可靠<h3>底部区域固定定位时，必须排除表格的 <code>overflow 影响
当分页器需要吸底（比如悬浮在视口底部），常配合 position: fixed 或 position: sticky。但如果表格父容器设置了 overflow: auto 或 hidden，会形成新的定位上下文，导致固定定位失效或偏移。
典型表现：分页器卡在表格容器底部，而不是页面视口底部。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
响应式分页区域容易忽略的宽度断点
分页按钮在小屏上挤成一排导致换行错乱，不是因为没写 flex-wrap，而是按钮本身宽度失控。默认 button 或 a 标签在 flex 容器中不收缩，会撑开父容器。
解决方式不是加 width: 100%，而是控制弹性行为：
.pagination { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination button { flex: 0 0 auto; min-width: 32px; }
- 避免用
float布局分页器 —— 已过时，且与表格流冲突 - 页码数字按钮建议用
button而非a，语义更准，无障碍支持更好 - 移动端优先隐藏“首页/末页”，保留“上一页/下一页”+ 当前页码输入框，减少触控区域干扰
表格分页区域和底部布局的真正难点，不在怎么摆位置，而在怎么让它不被表格自身的渲染规则、滚动上下文和语义约束意外劫持。每次调整前，先看一眼 computed style 里的 position、overflow 和 display 值，比反复试 margin 有效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
