百度地图iframe嵌入表格单元格时宽高不生效，因td默认按内容撑开且不支持百分比；需为td设固定宽高、iframe用像素值宽高并加display:block；须用百度开放平台生成的embed链接，禁用分享页链接；多地图卡顿时应懒加载或改用CSS布局；移动端需table-layout:fixed、td设宽高、加viewport meta。
百度地图嵌入表格单元格时 iframe 宽高不生效？
直接把 <iframe> 塞进 <td> 里，常出现地图只显示一小块、拉伸变形或完全空白。根本原因是表格单元格默认按内容撑开，而百度地图 iframe 需要明确的像素级尺寸控制，且不能依赖百分比宽高（尤其在 <table> 布局下）。
实操建议：
-
<td>必须设固定宽高，比如style="width: 600px; height: 400px;"，不能只靠<iframe>自己设 -
<iframe>的width和height属性必须用具体像素值（如width="600" height="400"），避免用100%—— 表格单元格对百分比解析不可靠 - 加
style="display: block;"到<iframe>，防止因内联元素默认行为导致底部留白
百度地图 iframe URL 怎么生成才可用？
不是所有百度地图分享链接都能直接塞进 <iframe>。官方公开分享页（https://map.baidu.com/ 开头的）多数禁用了 frame-ancestors，浏览器会拦截加载并报错 Refused to display 'https://map.baidu.com/...' in a frame because it set 'X-Frame-Options' to 'sameorigin'。
正确做法是使用百度「静态图」或「JS API 生成的 iframe 地址」：
立即学习“前端免费学习笔记（深入）”；
- 登录 百度地图开放平台 → 创建应用 → 获取
ak（密钥） - 构造 iframe src，格式为：
https://api.map.baidu.com/embed?qt=spot&wd=北京市朝阳区酒仙桥路10号&ak=YOUR_AK（wd是地址关键词，支持中文） - 若需指定坐标，用：
https://api.map.baidu.com/embed?qt=spot&lat=39.989525&lng=116.475825&zoom=15&ak=YOUR_AK
表格里多个地图 iframe 一起加载卡顿或白屏？
每个 <iframe> 都会触发独立的地图资源加载（JS、瓦片、定位等），表格里放三四个就容易触发浏览器并发限制或内存压力，尤其在低配设备上。
缓解方案：
- 给非首屏的
<iframe>加loading="lazy"（现代浏览器支持，Chrome 76+） - 用
src的延迟赋值代替直接写死：先设<iframe src="" >，滚动到可视区再用 JS 赋值src - 避免在
<table>中嵌套过多地图——表格本就不适合承载重交互组件；考虑改用<div>+ CSS Grid/Flex 布局替代
移动端表格中百度地图 iframe 显示异常？
手机上表格自动缩放、横向滚动、iframe 被截断是高频问题。核心矛盾是：表格强制保持列宽，而地图需要响应式容器。
关键处理点：
- 给
<table>加style="table-layout: fixed; width: 100%;"，再给含地图的<td>设width: 100%，让单元格宽度可被父容器约束 -
<iframe>的width改为"100%"，但必须确保其父<td>有明确像素高度（比如min-height: 300px） - 加 viewport meta：
<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则 iOS Safari 可能忽略 iframe 尺寸
真正麻烦的是百度地图 iframe 在移动端对 touch 事件的支持有限，缩放、拖拽可能失灵——这时候就得承认：表格不是地图的理想容器，该换布局就换。
