Arrondir un tableau à deux bordures

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Arrondir un tableau à deux bordures

Message par _backdraft_ le Sam 21 Jan 2012 - 12:13

Bonjour, j'ai arrondit un tableau grâce à un code CSS, le problème est que mon tableau a deux bordures... il y en a donc une qui ne s'arrondit pas, je voulais donc savoir comment est il possible d arrondir les deux. Merci


Code:
.tableauvehicules {
        border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}


Dernière édition par _backdraft_ le Sam 21 Jan 2012 - 15:19, édité 1 fois

_backdraft_
# Tropactif #

Masculin
Messages : 1505
Inscrit(e) le : 04/03/2010

http://www.caserne35.com
_backdraft_ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir un tableau à deux bordures

Message par Gorgorbey le Sam 21 Jan 2012 - 12:24

Bonjour,

Quel est le code de votre tableau ?

Cordialement.

Gorgorbey
+ Hyperactif +

Masculin
Messages : 3321
Inscrit(e) le : 09/09/2010

http://w4rx.forumactif.com/
Gorgorbey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir un tableau à deux bordures

Message par _backdraft_ le Sam 21 Jan 2012 - 12:52

Merci pour votre réponse, le voici :


_backdraft_
# Tropactif #

Masculin
Messages : 1505
Inscrit(e) le : 04/03/2010

http://www.caserne35.com
_backdraft_ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir un tableau à deux bordures

Message par Gorgorbey le Sam 21 Jan 2012 - 12:56

Dernière précision vous voulez arrondir toutes les cellules ou uniquement le contour du tableau ?

Gorgorbey
+ Hyperactif +

Masculin
Messages : 3321
Inscrit(e) le : 09/09/2010

http://w4rx.forumactif.com/
Gorgorbey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir un tableau à deux bordures

Message par _backdraft_ le Sam 21 Jan 2012 - 12:57

Uniquement le contour s'il vous plait.

_backdraft_
# Tropactif #

Masculin
Messages : 1505
Inscrit(e) le : 04/03/2010

http://www.caserne35.com
_backdraft_ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir un tableau à deux bordures

Message par Gorgorbey le Sam 21 Jan 2012 - 13:22

Remplacez votre HTML par :
Spoiler:
Code:
        <table class="tableauvehicules" style="width: 343px; height: 105px;" border="1px" cellpadding="1" cellspacing="0" width="343" align="left">
        <tbody>
        <tr>
        <td class="td1" style="text-align: center; background-color: Lime; color: blue; font-size: 18px;">CID</td>
        <td style="text-align: center; background-color: Lime; color: blue; font-size: 18px;">VSR</td>
        <td style="text-align: center; background-color: Lime; color: blue; font-size: 18px;">CCF</td>
        <td class="td2" style="text-align: center; background-color: Lime; color: blue; font-size: 18px;">VIC</td></tr>
        <tr>
        <td style="text-align: center; background-color: red; color: blue; font-size: 18px;">VSAV PL</td>
        <td style="text-align: center; background-color: white; color: blue; font-size: 18px;">FPTDA</td>
        <td style="text-align: center; background-color: white; color: blue; font-size: 18px;">EPA</td>
        <td style="text-align: center; background-color: Lime; color: blue; font-size: 18px;">VSAV 02</td></tr>
        <tr>
        <td class="td3" style="text-align: center; background-color: Lime; color: blue; font-size: 18px;">FPT 02</td>
        <td style="text-align: center; background-color: Lime; color: blue; font-size: 18px;">VTP</td>
        <td style="text-align: center; background-color: black; color: blue; font-size: 18px;">VLM</td>
        <td class="td4" style="text-align: center; background-color: white; color: blue; font-size: 18px;">VLCDG</td></tr></tbody></table>

Ajoutez ceci à votre CSS :
Spoiler:
Code:
.td1
{
  border-radius: 20px 0 0 0;
  -moz-border-radius: 20px 0 0 0;
  -webkit-border-radius: 20px 0 0 0;
}

.td2
{
  border-radius: 0 20px 0 0;
  -moz-border-radius: 0 20px 0 0;
  -webkit-border-radius: 0 20px 0 0;
}

.td3
{
  border-radius: 0 0 0 20px;
  -moz-border-radius: 0 0 0 20px;
  -webkit-border-radius: 0 0 0 20px;
}

.td4
{
  border-radius: 0 0 20px 0;
  -moz-border-radius: 0 0 20px 0;
  -webkit-border-radius: 0 0 20px 0;
}

Gorgorbey
+ Hyperactif +

Masculin
Messages : 3321
Inscrit(e) le : 09/09/2010

http://w4rx.forumactif.com/
Gorgorbey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir un tableau à deux bordures

Message par _backdraft_ le Sam 21 Jan 2012 - 13:28

Merci cependant, une bordure ne s'arrondit toujours pas (vous pouvez le voir sur mon forum le tableau est sur la page d'accueil).

_backdraft_
# Tropactif #

Masculin
Messages : 1505
Inscrit(e) le : 04/03/2010

http://www.caserne35.com
_backdraft_ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir un tableau à deux bordures

Message par Gorgorbey le Sam 21 Jan 2012 - 13:42

Il me faudrait le code entier de votre page d'accueil, pas seulement le tableau.

Gorgorbey
+ Hyperactif +

Masculin
Messages : 3321
Inscrit(e) le : 09/09/2010

http://w4rx.forumactif.com/
Gorgorbey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir un tableau à deux bordures

Message par _backdraft_ le Sam 21 Jan 2012 - 14:20

Voilà mais malheureusement ce code est un peu "bordélique"... merci de votre aide.

Si possible pouvez vous mettre des balises hide si vous me renvoyez le code de ma page d'accueil, merci.


_backdraft_
# Tropactif #

Masculin
Messages : 1505
Inscrit(e) le : 04/03/2010

http://www.caserne35.com
_backdraft_ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir un tableau à deux bordures

Message par Gorgorbey le Sam 21 Jan 2012 - 14:32

Cherchez :
Spoiler:
Code:
<td style="text-align: center;">VÉHICULES OPÉRATIONNELS</td></tr></tbody></table><div align="left"><div align="left"> </div></div><div align="left"> </div><div align="left"><div align="left"><div align="left"><span style="font-style: italic; font-weight: bold;"><u><font color="#a0522d">

Remplacez-le par :
Spoiler:
Code:
<td style="text-align: center;">VÉHICULES OPÉRATIONNELS</td></tr></tbody></table><div class="tableauvehicule" align="left"><span style="font-style: italic; font-weight: bold;">

Je n'ai pas mis de hide car cette partie de code ne me paraît pas "secrète".

Gorgorbey
+ Hyperactif +

Masculin
Messages : 3321
Inscrit(e) le : 09/09/2010

http://w4rx.forumactif.com/
Gorgorbey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir un tableau à deux bordures

Message par _backdraft_ le Sam 21 Jan 2012 - 14:43

Je ne vois aucuns changement après le remplacement.

Cordialement.

_backdraft_
# Tropactif #

Masculin
Messages : 1505
Inscrit(e) le : 04/03/2010

http://www.caserne35.com
_backdraft_ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir un tableau à deux bordures

Message par Invité le Sam 21 Jan 2012 - 14:53

Bonjour,

En reprenant votre code de base et en remplaçant votre CSS par ceci:
Code:
.tableauvéhicules {
  border: 1px solid black;
        border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
padding: 8px;
}
Est-ce mieux?

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir un tableau à deux bordures

Message par _backdraft_ le Sam 21 Jan 2012 - 15:12

Non voici ce que cela donne :


_backdraft_
# Tropactif #

Masculin
Messages : 1505
Inscrit(e) le : 04/03/2010

http://www.caserne35.com
_backdraft_ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondir un tableau à deux bordures

Message par _backdraft_ le Sam 21 Jan 2012 - 15:19

Ah j'ai réussit je n'avais pas vu qu'il fallait ajouter le CCS, j'avais enlevé l'autre... par contre le code à mis un peu de désordre sur ma page d'accueil mais rien de très grave je vais remettre ça en ordre. Merci

_backdraft_
# Tropactif #

Masculin
Messages : 1505
Inscrit(e) le : 04/03/2010

http://www.caserne35.com
_backdraft_ a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum