這是我有疑問和我必須做的這是我到目前為止所做的我很難解決這個問題，我懷疑我如何才能在元素之間留出這個空間，還有這個用灰色和紅色著色的邊框以及它們兩者之間的垂直線，我只能用純 HTML、CSS 和 JS 來做到這一點沒有任何框架/lib/api。我嘗試過類似的方法，但仍然無法按我想要的方式工作，如果有人可以提供幫助，我將不勝感激    .table {    display: inline-flex;    margin-top: 0rem;       margin-left: 5rem;         }.fgraphs {    position: relative;    height: 20px;    width: 100px;  }  .fgraphs:before,  .fgraphs:after {    content: "";    position: absolute;    top: 50%;    right: 0;    transform: translateY(-50%);  }  .fgraphs:before {    border-bottom: 2px dashed #979797;    width: 100%;  }  .fgraphs:after {    border-bottom: 3.5px solid #F03D24;    width: 50%;    border-radius: 4px 0 0 4px;  }    <table class="table">            <tbody>                <tr>                    <td>Domingo</td>                    <td>Icone</td>                    <td>54%</td>                    <td><img src="./images/cloudy-day-3.svg" alt=""></td>                    <td>20oC</td>                    <td class="fgraphs"></td>                    <td>32oC</td>                </tr>                <tr>                    <td>Segunda</td>                    <td>Icone</td>                    <td>54%</td>                    <td><img src="./images/cloudy-day-3.svg" alt=""></td>                    <td>20oC</td>                    <td class="fgraphs"></td>                    <td>32oC</td>                </tr>                <tr>                    <td>Ter?a</td>                    <td>Icone</td>                    <td>54%</td>                    <td><img src="./images/cloudy-day-3.svg" alt=""></td>                    <td>20oC</td>                    <td class="fgraphs"></td>                    <td>32oC</td>                </tr>