「テーブル」ブロックを「タイムライン」ブロック風に変更する方法

以下に手順を示します。

1. 「テーブル」ブロックを配置します。
2. 「テーブル」ブロックに高度な設定→追加CSSクラスにmy-timelineと入力します。

以下のコードをstyle.cssに追加します。

.my-timeline {
  table tr {
    background-color: transparent;
  }

  tr:has(td:first-child:not(:empty)) {
    border-top: 1px solid #ccc;
  }

  td {
    border: 0;
    padding: 10px;
    position: relative;

    &:nth-child(1) {
      border-right: 3px solid #ccc;
      font-weight: bold;
      width: 6em;
    }

    &:nth-child(2) {
      width: 6em;
    }

    &:first-child::before {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      right: -7px;
      width: 12px;
      height: 12px;
      background-color: #ff0000;
      border-radius: 50%;
      transform: translateY(-50%);
    }
  }
}

.body .my-timeline table tr:first-child {
  border: 0;
}