将 css 样式应用于外部 iframe 内的元素类

Question

我使用 elementor 将以下代码嵌套在 WordPress 网站上的 iframe 中

<div class=“container mt-4”>
<b>Current Public Events</b>
<br>
<b>Dec</b>
<table> = $0
    <tbody>
        <tr class=“event” onclick=“window.open(‘scheduler/ViewBooking/6255627?dm=False’)”></tr>
        <tr class=“event” onclick=“window.open(‘scheduler/ViewBooking/6255627?dm=False’)”></tr>
        <tr class=“event” onclick=“window.open(‘scheduler/ViewBooking/6255627?dm=False’)”></tr>
        <tr class=“event” onclick=“window.open(‘scheduler/ViewBooking/6255627?dm=False’)”></tr>
        <tr class=“event” onclick=“window.open(‘scheduler/ViewBooking/6255627?dm=False’)”></tr>
    </tbody>
</table>

我希望 tr 元素的样式设置为 20% 宽并且并排（内联），因为目前它们只是一个列在另一个元素下面，没有样式。

我尝试过以下方法

.event{width:20%!important;display:inline-block!important;}

但这没有任何作用

table > tr .event{width:20%!important;display:inline-block!important;}

什么都不做

网站是 https://sennencommunitycentre.co.uk，iframe 内容位于主滑块图像的正下方，标题为“当前公共事件”，我想对事件容器进行样式设置以占据整个内容如果可能的话，每个事件 tr 的页面宽度为 20% 宽？

非常感谢

Answer 1

我想你想做这样的事情。如果它对你有用那就太好了：

*{box-sizing: border-box;}
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    .container table {
      width: 100%;
    }

    .container table tbody {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }

    .container table tr {
      box-sizing: border-box;
      width: auto;
    }

    .container table tr td {
      border: 1px solid #000;
      width: 100%;
      display: inline-block;
      padding: 5px;
    }

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