Comment éviter la double frontière, en tr > td élément

J'aimerez savoir si c'est possible pour éviter le double des frontières dans un tr > td élément. Si j'utilise border:1px solid #DDD alors le premier élément aura toutes les frontières et puis, la seconde aussi, mais parce que le premier a une frontière-droit et le second a une frontière-gauche alors que les frontières sont doubles et la même chose pour la deuxième tr où la première a bas de la bordure et la deuxième a la frontière-top. Des conseils à donner? Je vois ce post mais ne fonctionne pas pour moi, car c'est pour la DIV et je suis à l'aide de tableaux.

Quel est votre code HTML et CSS?

OriginalL'auteur ReynierPM | 2012-09-14

  1. 15

    De démarrage:

    border-collapse:collapse;

    et d'ajuster si nécessaire. À l'aide de la :first-child et :last-child pseudo-sélecteurs peuvent être utilisés pour modifier le style par défaut sur l'une des extrémités.

    Matt il fonctionne uniquement configuration border-collapse: collpase; comme vous et Ryan l'a suggéré, mais je vais que pour voir un exemple de ce que vous dites au sujet de tune. Est trop demander d'écrire un petit exemple?
    Si border-collapse fait le truc, alors vous n'avez pas besoin de s'inquiéter à ce sujet, mais la pseudo-sélecteurs serait pour plus de comportement personnalisé. Comme un exemple artificiel, si vous voulez avoir une ligne avec une autre couleur de bordure verticale entre les cellules (et non sur la bordure de la table), alors vous pourriez faire quelque chose comme tr.special > td { border-right-color: #f00; } tr.special > td:last-child { border-right-color: #000; }

    OriginalL'auteur Matt Whipple

  2. 4

    Vous êtes à la recherche pour border-collapse

    Le border-collapse propriété CSS sélectionne une table de la frontière du modèle. Cela a une grande influence sur le look et le style des cellules de la table.

    Valeurs en tant que telles.

    border-collapse:  collapse | separate | inherit
    Thx ne sais pas ce que la propriété signifie vraiment jusqu'à maintenant.

    OriginalL'auteur Ryan Kinal

  3. 4

    Au lieu de mettre des frontières sur les cellules, de définir une couleur d'arrière-plan sur la table de la couleur que vous voulez frontières, de l'espace cellules par des 1px:

    HTML:

    ​<table>
    <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
    </tr>
    <tr>
        <td>Four</td>
        <td>Five</td>
        <td>Six</td>
    </tr>
</table>

    CSS:

    table {
    background: #ccc;
    border-spacing: 1px;
}
td {
    background: #fff;
    padding: 5px;
}

    Qui vous donnera ceci:

    Comment éviter la double frontière, en tr > td élément

    Noter que vous devez définir une couleur d'arrière-plan sur les cellules elles-mêmes, trop, sinon la couleur de fond de la table se montrer à travers.

    Bien que cela fonctionne, il est un peu hacky, et n'est pas idéal si la conception nécessite des milieux différents, ou semi-transparente origines.
    C'est extrêmement hacky et il dissimule l'intention de la conception: en particulier, lorsque la norme acceptée façon de le faire est si facilement disponible.
    Extrêmement hacky? Pourquoi? Il est parfaitement valide, il permet d'obtenir l'effet escompté, et il sera même travail dans les navigateurs qui ne supportent pas :first-child et :last-child. Je ne vois pas le mal.

    OriginalL'auteur daGUY