La frontière n'apparaissant pas dans IE9 & IE10

Je rencontre un problème avec une bordure de tableau affiche pas correctement. Ci-dessous est un violon de recréer le problème.

Ce Violon produit des résultats attendus dans FF et Chrome, mais pas dans IE9 et IE10.

Seulement css qui est appliqué est un border-collapse: collapse et

td{
   border:1px solid;
}

La deuxième ligne de la table doit avoir une bordure le long de la tout le fond cependant, la frontière est manquant sur la deuxième cellule de tableau. Peut être vu dans cette image.

Ce problème disparaît une fois la partie de la table est mis en évidence, mais le résultat attendu est que la frontière doit être là en premier lieu. Parfois, le violon doit être mis à jour pour la question à apparaître.

Est-ce un connu IE problème ou est-il plus un style qui doit être appliqué?

InformationsquelleAutor DHooper | 2013-04-01
  1. 1

    Meilleure solution que j'ai pu trouver:

    table{border-top:1px solid #000;}
tr{border-left:1px solid #000;border-bottom:1px solid #000;}
td{border-right:1px solid #000;}

    Exemple ici

    Contrôlés dans les deux IE9 et IE10

    • Si vous faites le modifier dans JSFiddle il permettra de résoudre la question d'abord. Cependant, lors de la sélection de "mettre à Jour" le problème sera de retour. Il semble que certains d'interaction (mise en valeur, l'évolution dans JSFiddle, de l'inspection des outils de développement) avec la table va l'amener à rendre la frontière correctement, mais il n'a pas rendu sur le chargement initial de la page.
    • humm... Oui, c'est très étrange... mise à Jour de réponse
    • Cela a réglé mon problème. Besoin d'apporter des modifications mineures à travailler sur ma demande (il y avait un mondial de style css sur le td qui a dû être remplacé avec border-bottom-style: none). Je vous remercie.
    • Cela ne devrait pas fonctionner. Au moins, dans mes tests, mettant des frontières sur la TR éléments avec le CSS n'est pas afficher dans IE10, de sorte que le tableau expliqué ci-dessus n'aura pas de gauche, ni de la bordure inférieure.
    InformationsquelleAutor Pavlo Shandro
  2. 1

    Car cela est causé par border-collapse: collapse il peut également être résolu en plaçant les frontières dans les endroits corrects manuellement et à l'aide border-collapse: separate.

    table { 
    border-collapse: separate;
    border-spacing: 0;
}

td {
    border-bottom:1px solid;
    border-right:1px solid;
}

tr > td:first-child {
    border-left: 1px solid;
}

table tr:first-child td {
    border-top: 1px solid;
}

    Cela ne fonctionne pas dans IE7 et ci-dessous, car ils ne prennent pas en charge ni border-spacing ni :first-child.

    • Essayé, dans IE10 Normes de la mode cette approche n'a pas fonctionné.
    • border-collapse: séparé; a fonctionné pour moi.
    • Dans IE11, border-collapse: séparé et border-spacing: 0 a fonctionné pour moi.
    InformationsquelleAutor Henrik Ripa
  3. 1

    J'ai eu un problème similaire et votre solution ci-dessus a fonctionné pour moi avec une légère modification. (J'ai utilisé primefaces)

    Code suivant travaillé

    .ui-datatable tbody>tr>td {
    border-top: 1.1px solid; 
}

    Code suivant ne fonctionne pas

    .ui-datatable tbody>tr>td {
    border-top: 1px solid; 
}
    InformationsquelleAutor Christian Hofer
  4. 1

    Pour moi cette travaillé:

    <table cellspacing="0" and cellpadding="0"> ... </table>
    InformationsquelleAutor chris