CSS-表格单元格上带有右箭头的表格进度条

我需要做一个进度条使用 <table> . 我希望阶梯元素的右边有一个箭头。这是我想要的.jpg:

这是我目前掌握的代码:

<table class="progress-steps">
    <tr>
        <td class="step-done">Select tours</td>
        <td class="step-active">Enter info</td>
        <td class="step-unfinished">Confirm</td>
        <td class="step-unfinished">Pay</td>
    </tr>
</table>

<style>
.progress-steps {
    width: 100%;
    font-weight: bold;
    border-collapse: collapse;
}

.progress-steps td {
    border-right: 4px solid #ffffff;
    padding: 10px 20px;
    text-align: center;
}

.progress-steps td:last-of-type {
    border-right: none;
}

.step-done {
    background-color: #305599;
    color: #849fd4;
}

.step-active {
    background-color: #5f81c1;
    color: #ffffff;
}

.step-unfinished {
    background-color: #ffffff;
    color: #9fb6df;
}

.step-unfinished {
    border-right-color: #9fb6df !important;
}
</style>

我怎样才能做到这一点?