En haut et en bas des frontières sur la ligne de la table

Comment faire? Je veux avoir des couleurs différentes en haut et en bas des frontières sur les lignes de mon tableau. Chrome le rendre correct si j'utilise display: block, mais je ne sais pas si c'est la bonne façon de le faire. Cependant, je veux qu'il fonctionne dans IE8 et je ne sais pas comment.

Je vous ai préparé un violon qui fonctionne dans Chrome: http://jsfiddle.net/s6LQ7/

OriginalL'auteur Viktor | 2013-01-28

  1. 9

    Cela fonctionne sur Firefox et IE8:

    table {
    width: 100%;
    border-collapse: separate; /* Not really necessary unless you use normalize.js */
    border-spacing: 0px; /* take out spaces between cells */
}

tr {
    background-color: #ccc;
}

td {
    width: 50%;
    border-top: 1px solid #f00; 
    border-bottom: 1px solid #0f0; /* move spacing to the cell */
}

    Ci-dessus utilise le standard HTML systèmes d'affichage, de sorte qu'il fonctionne sur IE8. J'ai:

    • Ensemble border-collapse à separate, ce qui empêche la table de l'effondrement des frontières, de sorte qu'il attire chaque frontière
    • Ajouté border-spacing ensemble de 0px pour supprimer l'espacement entre les cellules
    • Supprimé le display directives, permettant la table pour être affiché comme un tableau
    • Déplacé le border directives pour les cellules, plutôt que les lignes.

    http://jsfiddle.net/s6LQ7/1/

    Merci, mais la raison pour laquelle j'ai demandé à avoir des frontières sur l'élément de ligne était parce que ma bordures gauche et droite sur la cellule du tableau semblent empiéter sur le haut et le bas des frontières. J'ai besoin d'elle dans l'autre sens. Voir imgur.com/ZH6AAcF

    OriginalL'auteur Gareth Cornish

  2. -1

    Avez-vous essayé de mettre de la frontière sur les cellules au lieu de les lignes ?
    De plus, la plupart des règles css ne s'appliquent pas sur les cellules d'un tableau, sauf si vous utilisez une classe comme un sélecteur.

    "la plupart des règles css ne s'appliquent pas sur les cellules d'un tableau, sauf si vous utilisez une classe comme un sélecteur" pas vrai. vous pouvez définir le style quoi que ce soit sur une table à l'aide intégrée dans les tags, vous n'avez pas besoin d'ajouter des classes si vous ne souhaitez pas.

    OriginalL'auteur Jean-Georges