Crossing lines in html/twig - html

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.

Answer 1

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