Tableau : simuler un table border="1" en css...

chadom

4 Oct 2005 à 11:44

Google mon ami ne m'a pas éclairé sur ce simple problème :
Comment obtenir en css exactement le même rendu visuel
des bordures que celui d'un "traditionnel"

<table border="1">

je souligne que je souhaite vraiment les mêmes bordures (effet de relief/ombrage...) Smiley murf

merci !

Raphael

Administrateur

4 Oct 2005 à 12:42

Salut,

As-tu essayé ce genre de possibilités ?

table {
border-width : 2px;
border-style: outset;
border-color: #999 #aaa #999 #aaa;
}

chadom

4 Oct 2005 à 14:34

Merci pour la piste... je l'ai suivi et en effet avec "border-style: outset/inset;" j'obtiens bien l'effet de relief.
Voici le code complet (avec border="1" sur 1er table et CSS sur le second)


<style type="text/css">
.tabl {
  border-style: outset;
  border-width: 1px;
}
.tabl td {
  border-style: inset;
  border-width: 1px;
}

/* pour mieux voir pb de couleurs */
/* table td {border-width: 6px !important;} */

</style>

<body style="background:#fff">
<table border="1">
  <tr>
    <td>fooooo</td><td>bar</td>
  </tr>
</table><br>

<table class="tabl">
  <tr>
    <td>fooooo</td><td>bar</td>
  </tr>
</table>

Sous IE c'est identique impecable. Mais sour Firefox j'ai des différences de couleurs que je n'ai pas réussi à corriger (même avec "border-color"). Enfin c'est déjà pas mal...