[这里,我有一个由树枝中的for循环创建的表,我想将其应用于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">×</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 %}
唯一可以准备的代码是这样:
td:first-child,th:first-child{
box-shadow: -15px 0 15px -15px inset;
}
但是它仅逐行显示,而且不是很漂亮。
感谢您的帮助!
您可以使用此网站制作盒子阴影。
https://www.cssmatic.com/box-shadow
-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);