web-dev-qa-db-fra.com

couleur de fond et coins arrondis des cellules de la table

Dans l'extrait de code http://jsfiddle.net/hXMLF/3/ , vous voyez une petite bordure sur les coins entre le bord blanc des cellules et l'arrière-plan de la page. Comment puis-je l'empêcher?

HTML

<table cellspacing="0" cellpadding="0">
  <tr>
      <td>Test</td>
      <td>Test</td>
  </tr>
</table>​

CSS

body {
    background-color: #efefef;
}

table {
    margin: 10px;
    border-collapse: separate;
    border-spacing: 0px;
}

td {
    border-radius: 5px;
    background-color: #369;
    color: white;
    border: 5px solid white;
}​
htmlcsscss3css-tables
6
Nachtgold

Je propose deux solutions. Utilise la solution 2 mais je garde la solution 1 ici aussi car elle peut être utile dans une autre situation à quelqu'un d'autre.

Solution 1: affichage

Le fait de changer l'affichage de td en inline-block fait l'affaire, mais peut avoir une incidence sur votre contenu réel ailleurs ...

td {
    display: inline-block; /* this has been added */
    border-radius: 5px;
    background-color: #369;
    color: white;
    border: 5px solid white;
}​

Voici votre JSFiddle modifié pour la solution 1.

Solution 2: Clip d'arrière-plan (recommandé)

Mais puisque vous utilisez de toute façon CSS3, c'est une solution encore meilleure:

td {
    background-clip: padding-box; /* this has been added */
    border-radius: 5px;
    background-color: #369;
    color: white;
    border: 5px solid white;
}​

Voici votre JSFiddle modifié pour la solution 2.

Si cela ne fonctionne pas sur tous les navigateurs, sachez qu'il existe des paramètres spécifiques au navigateur, tels que -moz-background-clip et -webkit-background-clip, qui utilisent un ensemble de valeurs différent (ils omettent fondamentalement box de border-box, padding-box et content-box).

18
Robert Koritnik

Cela se produit parce que

border-collapse: separate;

le fait comme ça. Les tables ne sont pas exactement les prima donna at styling, je vous recommande d'utiliser plutôt les balises <div>.

ESSAYEZ CECI: http://jsfiddle.net/hXMLF/9/

1
JDuarteDJ

Vérifiez ce lien. Vous pouvez générer des CSS pour les cellules à coins arrondis.

http://cssround.com/

Exemple:

<div 
style="
width:400px;
height:300px;
-webkit-border-radius: 0px 26px 0px 0px;
-moz-border-radius:    0px 26px 0px 0px;
border-radius:         0px 26px 0px 0px;
background-color:#C2E3BF;
-webkit-box-shadow: #B3B3B3 2px 2px 2px;
-moz-box-shadow:    #B3B3B3 2px 2px 2px;
box-shadow:         #B3B3B3 2px 2px 2px;
">

Just modify width and height values to get what you need...

</div>
0
ARIJIT