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可能是满足您需求的良好起点。