object标签不能实现页面内嵌表格，因其加载的是独立文档上下文，而非将外部table元素注入当前DOM；CSS和JS无法跨上下文操作，滚动、尺寸、焦点均独立隔离。
object 标签不能实现「页面内嵌表格」——它加载的是独立文档上下文，不是把外部 HTML 的 <table> 元素注入当前 DOM。
为什么 object data="table.html" 看起来像嵌入了表格？
浏览器把 table.html 当作一个完整子文档渲染在 <object> 区域内，它的 <table> 和你的主页面完全隔离：
- CSS 选择器无法跨上下文匹配（
#my-table在主页面写无效） - JavaScript 无法用
document.querySelector('table')拿到子文档里的表格 - 滚动行为、尺寸计算、焦点管理都独立，容易和父页面样式冲突
- 如果
table.html里有脚本或相对路径资源，会按它自己的 base URL 解析，不是主页面的
真正想“把外部表格 HTML 片段嵌进当前页面”，该用什么？
你需要的是内容注入，不是文档嵌套。推荐方案：
-
fetch + innerHTML：最直接，适合静态表格片段
fetch('data/table.html').then(r => r.text()).then(html => document.getElementById('target').innerHTML = html) -
iframe + postMessage（仅当必须保持沙箱隔离）：若表格含交互逻辑且你信任来源，可用
<iframe src="table.html">，再通过window.postMessage双向通信控制 - 服务端 include（如 SSI、PHP include）：无 JS 依赖，但需服务端支持，且无法动态刷新
别用 <object data="table.html" type="text/html"> —— 它在 Firefox 中可能不触发 load 事件，在 Safari 中 fallback 内容常被忽略，且所有主流浏览器都不保证其 text/html 渲染行为一致。
立即学习“前端免费学习笔记（深入）”；
如果坚持用 object，至少要避开这些坑
<object> 加载 HTML 片段时，以下问题高频发生：
- Chrome 不执行子文档里的
<script>，即使写了type="text/html" - Firefox 对
data路径为相对路径时，base URL 有时取自<object>所在位置，有时取自主文档，行为不一致 - 没有
onload回调能可靠判断子文档 DOM 就绪；onload只表示资源加载完成，不代表document可用 - 若
table.html返回 HTTP 404 或 MIME 类型错误（如服务器返回text/plain），部分浏览器直接显示空白，不渲染 fallback 内容
真正需要表格数据动态更新时，object 是个死胡同。它连基本的 DOM 访问权都不给你，更别说排序、筛选、导出这些操作了。
