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

То, что вам нужно, называется «хлебная крошка».Есть много примеров в Интернете.Концептуально я бы предложил использовать неупорядоченный список, а не таблицу.Это имеет больше смысла для меня. Это может быть хорошей отправной точкой для ваших нужд.