[Résolu] Border-radius et border sur un tableau

Bonjour à tous,
Je cherche à appliquer une bordure de couleur au cadre de mon tableau.



Pouvez-vous m'aider ?

<table class="tableau">
	<tbody>
	<tr>
		<td><i class='fas fa-map-pin'></i></td>
      	<td>Commune : #commune# (#departement#)</td>
	</tr>
	<tr>
      	<td><i class='fas fa-pen'></i></td>
		<td>Arrêté : n°#numero_arrete#</td>
	</tr>
    <tr>
      	<td><i class='fas fa-angle-right'></i></td>
		<td>Date de début : #date_debut#</td>
	</tr>
    <tr>
      	<td><i class='fas fa-angle-right'></i></td>
		<td>Date de fin : #date_fin#</td>
	</tr>
	</tbody>
</table>

	.tableau{
      	background-color: #C9EBF8 !important;
		border-radius: 20px !important;
      	border: 5px solid #FF0000;
      	overflow: hidden;
      	padding: -5px;  
      	columns:2;
	}

Merci
Mathieu
Modifié par OUARZA (27 Oct 2022 - 08:56)

Salut,

Le code à l'air correct. Ca ne fonctionne pas ?

https://jsfiddle.net/xrn2qv03/


btw : le padding -5 est invalide et le column 2 ne sert a rien avec le code qu'on a ici (ca sert peut etre avec le reste du code)
Modifié par _laurent (27 Oct 2022 - 09:12)

Bonjour Laurent,
Le padding -5 c'était pour tester, mais même 5px ne marche pas.
Pour le column, cela me sert pour après.
Je t'ai mis en image le résultat, je n'ai pas la bordure de couleur.

Mathieu

OUARZA a écrit :
Le padding -5 c'était pour tester, mais même 5px ne marche pas.
Je t'ai mis en image le résultat, je n'ai pas la bordure de couleur.

yes j'ai vu mais je t'ai mis un lien avec le code que tu nous as donné et ca marche bien, le border rouge est bien là.

Pour le padding, s'il est positif ca marche : https://jsfiddle.net/63neqk9b/

Il doit y avoir autre chose qui coince (du code CSS en double ailleurs, mauvais fichiers, etc..) que dit l'inspecteur de code quand tu observes le tableau ?

Bon, je vais gratter alors.
J'utilise ce CSS sur Jeedom.
Peut-être qu'un autre style css prend le dessus ?!

Mathieu

Je ne sais plus où j'ai lu que ce n'était faisable que par une astuce. Je vais essayer de retrouver ça. En tout cas ça ne marche pas si on met un border-radius sur une <table> ou même sur n'importe quoi qu'on a stylé display:table

Hello,
Ce code fonctionne: https://jsfiddle.net/0vw3jhkg/

	.tableau{
      	background-color: #C9EBF8 !important;
      	border: 5px solid red;
      	border-radius: 20px !important;
  	  	border-spacing:5px;
      	border-collapse: separate;
      	columns:2;
	}
.tableau td {
		padding:5px;
     	background-color: #C9EBF8 !important;
      	
	

Merci à tous pour votre aide.
Mathieu
Modifié par OUARZA (27 Oct 2022 - 21:31)