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

Question

我需要使用<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>

我该如何实现？ 谢谢！

Answer 1

您需要的被称为“面包屑”。在线上有很多示例。从概念上讲，我建议使用无序列表而不是表格。这对我来说更有意义。 This可以满足您的需求。