.action-timeline-table { width: calc(100% - 60px); margin: 0 30px; border-collapse:separate; border-spacing:0px 40px; .action-timeline-thead { th:nth-child(1) { min-width: 200px; } th:nth-child(2) { width: 100% } } .action-timeline-tbody { tr { td { position: relative; > .date { display: flex; width: 200px; display: flex; justify-content: space-between; padding: 16px; background-color: #f5f5f5; border-radius: 8px; font-size: 16px; .arrow { margin-left: 10px; } } >.date::before { content: ' '; display: block; position: absolute; right: -20px; top: 30px; height: 2px; width: 20px; background-color: var(--item-font-color); } >.timeline { padding: 16px; min-height: 68px; margin-left: 18px; background-color: #f5f5f5; border-radius: 8px; .action-timeline-wrapper { padding-left: 165px; color: #57A3FD; >.action-timeline-item { position: relative; height: 30px; display: list-item; list-style: none; top: -6px; >.timeline-time { position: absolute; left: -115px; top: 5px; font-size: 12px; } >.timeline-content { padding: 5px; padding-left: 65px; } } >.action-timeline-item::before { position: absolute; top: 17px; left: 45px; z-index: 3; width: 7px; height: 7px; background-color: var(--view-font-color-bright); border: 1px solid var(--view-font-color-bright); content: ' '; border-radius: 50%; } >.action-timeline-item:nth-child(n+2)::after { position: absolute; top: -7px; bottom: 12px; left: 48px; z-index: 1; display: block; content: ' '; border-left: 1px solid var(--view-font-color-bright); } } } } } } }