由于同源策略限制，主页面无法直接通过 javascript 或外部 css 修改跨域 iframe 内部元素的样式；若 iframe 同源，则需将样式注入 iframe 的 document 中，或修改 iframe 内部 html 结构配合现代布局（如 css grid）实现横向排列。

由于同源策略限制，主页面无法直接通过 javascript 或外部 css 修改跨域 iframe 内部元素的样式；若 iframe 同源，则需将样式注入 iframe 的 document 中，或修改 iframe 内部 html 结构配合现代布局（如 css grid）实现横向排列。

要在 iframe 内部对 .event 行级元素实现「5 列等宽、水平并排」效果（即每项占 20% 宽度），关键在于：不能直接对 设置 display: inline-block 或 width —— 因为 是表格行元素，其尺寸由表格布局模型严格约束，强行设置 width/display 通常无效。

✅ 正确解法是重构布局逻辑：

• 将 视为内容容器而非语义化表格行；
• 使用 CSS Grid 替代传统表格流式布局；
• 确保 （或包裹内容的单元格）承担实际渲染职责，并继承网格项行为。

  以下是推荐的完整实现方案：

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载

  ✅ 推荐 CSS（注入 iframe 内部 或内联

  * { box-sizing: border-box; }
  .container table {
    width: 100%;
    border-collapse: collapse;
  }
  .container table tbody {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 精确 5 列，每列 20% */
    gap: 8px; /* 可选：列间间距 */
  }
  .container table tr {
    width: 100%;
    cursor: pointer;
  }
  .container table tr td {
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 6px;
    text-align: center;
    font-weight: 500;
    transition: all 0.2s ease;
  }
  .container table tr:hover td {
    background: #e9ecef;
    transform: translateY(-2px);
  }

  ✅ 对应 HTML 结构（需确保 iframe 内容包含 ）：

  <div class="container mt-4">
    <b>Current Public Events</b>
    <br><b>Dec</b>
    <table><tbody>
  <tr class="event" onclick="window.open('scheduler/ViewBooking/6255627?dm=False')">
  <td>Event 1</td>
        </tr>
  <tr class="event" onclick="window.open('scheduler/ViewBooking/6255627?dm=False')">
  <td>Event 2</td>
        </tr>
  <tr class="event" onclick="window.open('scheduler/ViewBooking/6255627?dm=False')">
  <td>Event 3</td>
        </tr>
  <tr class="event" onclick="window.open('scheduler/ViewBooking/6255627?dm=False')">
  <td>Event 4</td>
        </tr>
  <tr class="event" onclick="window.open('scheduler/ViewBooking/6255627?dm=False')">
  <td>Event 5</td>
        </tr>
  </tbody></table>
  </div>

  ⚠️ 重要注意事项：

  • 同源前提：仅当 iframe 与父页面同域（如 https://sennencommunitycentre.co.uk 加载的 iframe 也来自该域名）时，才可通过 JavaScript 动态注入样式：

    const iframe = document.querySelector('iframe');
    const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
    if (iframeDoc) {
      const style = iframeDoc.createElement('style');
      style.textContent = `/* 上述 CSS */`;
      iframeDoc.head.appendChild(style);
    }

  • 跨域限制：若 iframe 来源不同（如嵌入第三方日历服务），浏览器会阻止 DOM 访问 —— 此时唯一可行方案是联系 iframe 提供方，请求其开放样式定制接口或支持 postMessage 协议传递主题配置。
  • 响应式增强：可追加媒体查询适配小屏：

    @media (max-width: 768px) {
      .container table tbody {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 480px) {
      .container table tbody {
        grid-template-columns: 1fr;
      }
    }

  通过 Grid 布局替代传统表格渲染逻辑，既保持语义清晰，又获得精准可控的宽度分配与交互表现 —— 这是现代 Web 开发中处理此类“伪表格布局”的最佳实践。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！