html/twig 中的交叉线

Question

我尝试了此论坛上发布的一些答案，但找不到适合我的答案，

我意识到这是一个古老的问题抱歉。

我正在尝试像这个设计中那样得到一条垂直线：

我面临的问题是，这是在 table 中，我不知道如何让他们像这样进入 cros。

它是关于具有 'scores' id

的元素 td

Twig 文件

    {% 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 %}

我尝试创建一个 div 的 1px，但没有成功。我尝试了这个问题的几个解决方案 How to make a vertical line in HTML

None 似乎适合我的用例。

Answer 1

再四处寻找发现了这个：

<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>

我要在列的中间添加一条垂直线并设置 hr 标签的样式

html/twig 中的交叉线

Crossing lines in html/twig

html

symfony

twig