如何为外部iframe内的tr.event类应用CSS横向排列样式

问题根源 #

你的CSS无效是因为<tr>元素在默认表格布局中，浏览器会强制将其display属性重置为table-row，直接设置inline-block或修改宽度不会生效。要实现横向排列，必须先打破表格的默认布局规则。

实现代码 #

将以下CSS添加到对应样式中（若iframe为同域资源可直接添加到父页面，跨域则需在iframe源页面添加）：

/* 重置表格布局，改用flex实现横向排列 */
.container.mt-4 table {
  display: flex;
  width: 100%;
  border-collapse: collapse; /* 移除默认表格边框间距 */
}

.container.mt-4 table tbody {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 0;
}

.container.mt-4 table tbody tr.event {
  flex: 0 0 20%; /* 强制占20%宽度，不伸缩 */
  box-sizing: border-box; /* 包含内边距、边框到宽度计算 */
  padding: 8px;
  border: 1px solid #eee; /* 可选：添加边框区分事件项 */
  cursor: pointer; /* 提示可点击 */
}

补充优化 #

要让事件容器占满页面宽度，需调整外层容器样式：

.container.mt-4 {
  width: 100% !important;
  max-width: none !important; /* 覆盖可能存在的最大宽度限制 */
  padding: 0 16px; /* 可选：添加左右内边距避免内容贴边 */
}

• flex: 0 0 20%确保每个事件项严格占20%宽度，5个刚好填满整行，超出则自动换行
• box-sizing: border-box避免内边距、边框导致宽度溢出，保证布局整齐

内容的提问来源于stack exchange，提问作者BBLJ84