由于同源策略限制，主页面无法直接通过 javascript 或外部 css 修改跨域 iframe 内部元素的样式；若 iframe 同源，则需将样式注入 iframe 的 document 中，或修改 iframe 内部 html 结构配合现代布局（如 css grid）实现横向排列。
由于同源策略限制，主页面无法直接通过 javascript 或外部 css 修改跨域 iframe 内部元素的样式；若 iframe 同源，则需将样式注入 iframe 的 document 中，或修改 iframe 内部 html 结构配合现代布局（如 css grid）实现横向排列。
要在 iframe 内部对 .event 行级元素实现「5 列等宽、水平并排」效果（即每项占 20% 宽度），关键在于：不能直接对 <tr> 设置 display: inline-block 或 width —— 因为 <tr> 是表格行元素，其尺寸由表格布局模型严格约束，强行设置 width/display 通常无效。
✅ 正确解法是重构布局逻辑：
- 将 <tr> 视为内容容器而非语义化表格行；
- 使用 CSS Grid 替代传统表格流式布局；
- 确保 <td>（或包裹内容的单元格）承担实际渲染职责，并继承网格项行为。
以下是推荐的完整实现方案：
✅ 推荐 CSS（注入 iframe 内部 <head> 或内联 <style>）：
* { 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 内容包含 <td>）：
<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 开发中处理此类“伪表格布局”的最佳实践。
立即学习“前端免费学习笔记（深入）”；
