如何在col html标记中应用框阴影？

在这里，我有一个由twig中的for循环创建的表，我想应用到一个冒号a shaow。也就是说，当定居者在课堂上“弄虚作假”时，他欺骗了他，给他涂上了一层阴影。但这不起作用：/

我的树枝代码：

{% set title= "Nos offres Minecraft - DataHosting" %}
{% set description = "Venez découvrir nos offres minecraft 100% gratuites à vie et performante. Vous n'avez pas besoin de débourser 1 centime !" %}
{% set org_url = url('offre_minecraft') %}

{% extends "site/baseSite.html.twig" %}

{% block content %}
    <div class="table-responsive">
    <table class="table table-striped-col table-light">
        <colgroup>
            <col>
            {% for product in list_product %}
            <col {{ (app.request.get("offre") is defined and app.request.get("offre") == product.id) ? 'class="seleted_offre"' : "" }}>
            {% endfor %}
        </colgroup>
        <thead>
        <tr>
            <th></th>
            {% for product in list_product %}
                <td class="text-center" width="210px"><strong>SERVEUR MINECRAFT {{ product.info.name | raw }}</strong></td>
            {% endfor %}
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">NOMBRE DE JOUEURS</th>
            {% for product in list_product %}
                <td class="text-center">{{ product.info.maxplayers }}</td>
            {% endfor %}
        </tr>
        <tr>
            <th scope="row">MÉMOIRE RAM</th>
            {% for product in list_product %}
                <td class="text-center">{{ product.info.ram }}</td>
            {% endfor %}
        </tr>
        <tr>
            <th scope="row">NOMBRE DE VCPU</th>
            {% for product in list_product %}
                <td class="text-center">{{ product.info.vcpu }}</td>
            {% endfor %}
        </tr>
        <tr>
            <th scope="row">ESPACE DIQUE (SSD)</th>
            {% for product in list_product %}
                <td class="text-center">{{ product.info.disk }}</td>
            {% endfor %}
        </tr>

        <tr>
            <th scope="row">IP PERSONNALISABLE</th>
            {% for product in list_product %}
                <td class="text-center">
                    {% if product.info.ipperso %}
                        <i class="fas fa-check" style="color: green;"></i>
                    {% else %}
                        <i class="fas fa-times" style="color: red;"></i>
                    {% endif %}
                </td>
            {% endfor %}
        </tr>

        <tr>
            <th scope="row">PORT DÉDIÉE</th>
            {% for product in list_product %}
                <td class="text-center">{{ product.info.portperso }}</td>
            {% endfor %}
        </tr>

        <tr>
            <th scope="row">SAUVEGARDES AUTOMATISÉES</th>
            {% for product in list_product %}
                <td class="text-center">
                    {% if product.info.autosave %}
                        <i class="fas fa-check" style="color: green;"></i>
                    {% else %}
                        <i class="fas fa-times" style="color: red;"></i>
                    {% endif %}
                </td>
            {% endfor %}
        </tr>

        <tr>
            <th scope="row">NOMBRE DE SAUVEGARDES</th>
            {% for product in list_product %}
                <td class="text-center">{{ product.info.maxsave }}</td>
            {% endfor %}
        </tr>
        <tr>
            <th scope="row">VERSIONS DE MINECRAFT</th>
            {% for product in list_product %}
                <td class="text-center">{{ product.info.version }}</td>
            {% endfor %}
        </tr>

        <tr>
            <th scope="row">BASE DE DONNÉES</th>
            {% for product in list_product %}
                <td class="text-center">
                    {% if product.info.mysql %}
                        <i class="fas fa-check" style="color: green;"></i>
                    {% else %}
                        <i class="fas fa-times" style="color: red;"></i>
                    {% endif %}
                </td>
            {% endfor %}
        </tr>

        <tr>
            <th scope="row">SUPPORT</th>
            {% for product in list_product %}
                <td class="text-center">
                {% if product.info.support_txt is defined %}
                    {{ product.info.support }}
                {% elseif product.info.support %}
                    <i class="fas fa-check" style="color: green;"></i>
                {% else %}
                    <i class="fas fa-times" style="color: red;"></i>
                {% endif %}
                </td>
            {% endfor %}
        </tr>
        <tr>
            <th>PRIX</th>
            {% for product in list_product %}
                <td class="text-center">{{ product.price }} DC</td>
            {% endfor %}
        </tr>
        <tr>
            <th>DISPONIBLE</th>
            {% for product in list_product %}
                <td class="text-center"><strong>
                {% if product.price == 0 %}
                    {{ free }}
                {% else  %}
                    {{ (avaliable//product.spec.ram) }}
                {% endif %}
                </strong></td>
            {% endfor %}
        </tr>
        <tr>
            <th></th>
            {% for product in list_product %}
                <td><button class="btn {{ product.btn }}" style="color: ghostwhite" onclick="addCart('{{ path('add_cart', {id: product.id }) }}', {{ loop.index }})">Ajouter au panier !</button></td>
            {% endfor %}
        </tr>
        </tbody>
    </table>
    </div>
    {% for product in list_product %}
    <div class="modal" tabindex="-1" role="dialog" id="continue_or_not{{ loop.index }}">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Serveur ajouté !</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Le serveur {{ product.info.name | raw }} à bien été ajouté à votre panier ! <br />Souhaitez-vous d'autres services ?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Continuer !</button>
                    <a class="btn btn-success" href="{{ path('cart') }}">Voir mon panier !</a>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
{% endblock %}

{% block javascripts %}
<script type="text/javascript">
    //Checkout ?
    function addCart(url, index) {
        fetch(url);
        $("#continue_or_not" + index).modal("show");
    }
</script>
{% endblock %}

但是它只能一行一行地显示，而且它不是很漂亮

---

谢谢你的帮助

您可以将此站点用于框阴影

---

多年来，没有一款浏览器需要这些供应商前缀。我在《我的担忧》中解释过，如果HTML标记“col”实际上不起作用，那么它就不起作用。我想了解为什么在标记“col”上，如果你想问一个HTML/CSS问题，您需要确保不会像这里一样显示大量其他不相关的代码。给定的代码只是HTML和CSS。只是我在用小树枝创建页面，我不知道出了什么问题。因此，我只发布了与我的问题对应的代码。在

{}

中显示的所有代码都不是HTML或CSS。它只是妨碍了我，这并没有让我提前考虑我的问题。我当时可能已经在细枝标签中添加了它，因为这不会造成干扰。

 -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
 -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
 box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);