CSS cellule de la Table de la frontière qui se chevauchent table border

Je ne suis pas un expert en css, donc c'est un peu frustrant. J'ai une grille qui a été rempli avec un répéteur. Je veux que chaque rangée d'avoir un 1px frontière le long du bas visuellement séparer les lignes. Je veux aussi un gris foncé frontière de chaque côté de la table. Avec le code CSS suivant pour cette table:

        #repeaterTable
        {
            border-left: 1px solid #A3A3A3; 
            border-right: 1px solid #A3A3A3;
            border-collapse: collapse;
        }
        repeaterTable.td
        {
            border-bottom: 1px solid white; 

        }

J'obtiens ce résultat dans FF (SS du bord droit de la table):

le texte d'alt http://img251.imageshack.us/img251/9278/borderff.png

Et ce dans IE8:

le texte d'alt http://img412.imageshack.us/img412/7092/borderie.png

Ce que j'ai besoin est d'avoir le gris foncé de la frontière restent solides, au lieu de se briser pour chaque ligne de la frontière. Le tableau a deux colonnes, mais la cellspacing est à 0px donc la définition de la frontière-bas sur le tr de façon continue de la frontière. Quelqu'un peut-il suggérer quelques modifications pour le css pour obtenir ce travail?

Devrait repeaterTable.td être #repeaterTable td?
Qui ne l'aide, vous avez raison. Maintenant, c'est à dire est de l'afficher correctement, mais Firefox a encore écrasé la table de la frontière avec chaque ligne de la frontière...

OriginalL'auteur Kevin | 2010-01-12

  1. 9

    Essayez ceci pour obtenir l'effet que vous voulez:

    #repeaterTable
{
    border-left: 1px solid #A3A3A3; 
    border-right: 1px solid #A3A3A3;
    border-collapse:collapse;
    border-spacing:0px;
    background-color:#ccc;
}
#repeaterTable td:first-child 
{             
    border-left: 1px solid #A3A3A3;  
}
#repeaterTable td:last-child 
{             
    border-right: 1px solid #A3A3A3;  
}
#repeaterTable td
{
    border-bottom: 1px solid white; 
}

    Testé avec la balise suivante dans IE8 et FF (ne fonctionne pas sous Chrome/Safari 🙁 ).

    <table id="repeaterTable">
 <tr> <td>&nbsp;</td><td>&nbsp;</td> </tr>
 <tr> <td>&nbsp;</td><td>&nbsp;</td> </tr>
 <tr> <td>&nbsp;</td><td>&nbsp;</td> </tr>
 <tr> <td>&nbsp;</td><td>&nbsp;</td> </tr>
</table>
    Merci, cela a fonctionné!
    Vous n'avez pas toujours besoin de &nbsp; dans un élément vide. Non jamais.
    Sauf dans les vieux navigateurs à la force rendu contenant les styles.

    OriginalL'auteur Joel

  2. 3

    À l'aide de CSS obtiendrez à la recherche comme vous le souhaitez dans IE/Safari/FF/Chrome. Le problème, c'est le border-collapse, c'est ce qui est à l'origine de la poursuite de la bordure blanche dans la bordure de la table. Si vous le supprimer (et rajouter dans cellpadding="0" et cellspacing="0") et aller avec ce CSS:

    #repeaterTable
{
    border-left: 1px solid #A3A3A3; 
    border-right: 1px solid #A3A3A3;
    background: #CCC;
}
#repeaterTable td
{
    border-bottom: 1px solid white;
}
#repeaterTable td.last
{
    border-bottom: 0px;
}

    Avec ce code HTML:

    <table id="repeaterTable" cellpadding="0" cellspacing="0">
<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
<tr><td class="last">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
</table>

    Ça marchera.

    Vous pouvez utiliser :dernier enfant dans le CSS, mais qui n'est pas pris en charge par les anciens navigateurs (IE7/etc) donc il va chercher de mal. Dépend de la façon compatible vous voulez être. Donc, au lieu de cela j'ai utilisé une "dernière" de la classe.

    Alternativement, vous pourriez juste envelopper le tableau dans un DIV qui a gauche et à droite de la bordure et vous n'avez plus à vous soucier de la ligne des frontières et vous pouvez utiliser l'effondrement.

    Je vais aussi essayer cette option pour être un peu plus compatible avec les navigateurs. Merci pour votre aide!
    Je sais que cette réponse est un peu vieux maintenant, mais juste pour info pour les autres, cellpadding et cellspacing n'est plus valide HTML en HTML5.

    OriginalL'auteur Parrots