Crossing lines in html/twig

Question

I tried some of the answers posted on this forum but cannot find one fitting for me,

I realise this is an age old question sorry.

Im trying to get a vertical line like in this design:

The problem i'm facing is that this is in a table and I cannot figure out how to get them to cros like this.

Its about the element td with 'scores' id

Twig file

    {% extends 'base.html.twig' %}

{% block body %}

    <div class="table-responsive">
        {% for group in duel_groups %}
            {% if group is not empty %}
        <table class="table table-bordered table-light" style="margin-top: 30px;">
            <thead>
            <tr>
                <th>Omloop</th>
                <th>Partuur 1</th>
                <th>Scores</th>
                <th>Partuur 2</th>
{#                <th>Spelers</th>#}
            </tr>
            </thead>
            <tbody class="text-center">
            {% for duel in group %}
                <tr>
                    <td>{{ duel.omloopNummer }}</td>


                    <td id="team1">{{ duel.team1 }}</td>


                    <td id="scores">
                        {{ duel.eerstenP1 }} {{ duel.eerstenP2 }}<br>
                        <hr>
                        {{ duel.puntenP1 }} {{ duel.puntenP2 }}
                    </td>
                    


                    <td id="team2">{{ duel.team2 }}</td>

                </tr>
            {% endfor %}
            </tbody>
        </table>
    {% endif %}
    {% endfor %}
    </div>


{% endblock %}

I have tried creating a div of 1px but that didn't work. I tried a couple of solutions from this question How to make a vertical line in HTML

None seem to fit my use case tho.

Have you styles that you have created to try to achieve this? Can you share what you have tried? — Einar Ólafsson, Aug 06 '21 at 18:21
I'm not really sure what you are trying to achieve, you are trying to make a cross from vertical lines? Did you try using CSS to achieve your goal? It might be helpful to abstract the HTML, so it can be run here as a snipped example, omitting the twig specific template code. — Einar Ólafsson, Aug 06 '21 at 18:35
Reason #9364 why you shouldn't use tables for anything like this. — Rob, Aug 07 '21 at 14:57

score 0 · Accepted Answer · answered Aug 06 '21 at 18:50

Poking around some more came up with this:

<td id="scores" style="background: linear-gradient(#bcbcbd, #bcbcbd) no-repeat center/3px 85%;"> 
       {{ duel.eerstenP1 }} {{ duel.eerstenP2 }}<br>
           <hr style="border-top: 3px solid #000000; background: transparent;">
       {{ duel.puntenP1 }} {{ duel.puntenP2 }}
</td>

Where I am adding a vertical line to the middle of the column and styling the hr tag

Crossing lines in html/twig

1 Answers1