web-dev-qa-db-fra.com

Pourquoi Firefox manque-t-il la bordure de certains tableaux HTML?

J'utilise Firefox 3.5.7 et le même CSS est utilisé dans plusieurs tableaux HTML, mais il existe quelques exemples où certaines parties des bordures ne sont pas affichées. 

Ce qui n'a aucun sens pour moi, c'est que le même CSS sur la même page pour un autre tableau HTML fonctionne correctement. En outre, la même page dans Internet Explorer semble bien d'un point de vue frontière. 

Voici une image avec un exemple, comme vous pouvez le voir dans ce cas, il manque une bordure au bas du premier tableau.

 enter image description here

Quelqu'un at-il une idée pourquoi cela se produirait ici?

htmlfirefoxhtml-tableborder
22
leora

Vielleicht haben Sie ein bisschen gezoomt. Il meurt à la guerre ou à l’autre ou à la mort, quand il meurtCtrl+ Scrollrad. Möglicherweise est actuellement disponible sur Zoomstufe Null zurückgesetzt. Liste des sites internet des sites web, au-dessus de SO, erkennbar.

Um Dies zu beheben, drücken Sie einfachCtrl+ Oder Ansicht > Zoom > ) Zurücksetzen , cliquez sur Zoom sur la fiche de produit.

Il est impossible de télécharger Firefox/Gecko-Fehler 410959 . Dies betrifft Tabellen mit border-collapse:collapse. Nous sommes en train de publier une photo en 2008 et en savoir plus sur ce livre, cliquez ici pour consulter le texte et la description du problème. Eine Möglichkeit besteht darin, border-collapse:separate zu verwenden und zellenweise mit Rändern zu fummeln.

61
BalusC

J'ai trouvé un problème similaire lors d'un zoom arrière dans Firefox sur une application sur laquelle je travaille.

La cause principale était que la propriété CSS border-collapse était définie sur collapse. 

Le remplacer par separate a résolu le problème. Cependant, cela signifiait que je devais repenser la manière dont les bordures étaient appliquées à différentes parties du tableau, car sinon, vos bordures sembleraient doubler d'épaisseur. J'ai finalement dû utiliser jQuery pour attribuer une "dernière" classe spéciale à la dernière variable td ou th de chaque tr et à la dernière tr de la table. Ma requête était quelque chose comme:

$('table tr > th:last-child, table > tbody > tr > td:last-child, table > tbody > tr:last-child').addClass('last');

Mes règles CSS étaient similaires:

table
{
    border-collapse: separate !important;
}

table tr, table th, table td
{
    border-right-width: 0;
    border-bottom-width: 0;
    border-left: 1px solid black;
    border-top: 1px solid black;
}

table td.last, table th.last 
{
    border-right: 1px solid black;
}

table tr.last td
{
    border-bottom: 1px solid black;
}

table
{
    border: 0;
}

J'ai finalement utilisé le ciblage par navigateur afin de n'appliquer ces règles qu'aux utilisateurs de Firefox, mais cela peut fonctionner pour tous les navigateurs, je n'ai pas encore testé.

11
GregL

En me basant sur la bonne réponse de @GregL (il semble impossible de "commenter" directement dessus): Au lieu d’utiliser JQuery pour générer une "dernière" classe, j’ai simplement utilisé le sélecteur de pseudo-éléments intégré :first-child . J'ai construit des règles en sélectionnant tr:first-child et td:first-child qui définissent border-top et border-left (au lieu de border-right et border-bottom comme dans la réponse de GregL). Les règles génériques définissent border-right et border-bottom au lieu de border-left et border-top. :first-child est est censé être pris en charge dans Chrome v. 4.0, Firefox v. 3.0, IE 7.0, Safari v. 3.1 et Opera v. 9.6 (). Testé sur Firefox v. 40.0.3, où j'ai vu ce problème en premier lieu.

2
Donald Payne

Cela était dû au fait que la table (avec une bordure inférieure manquante) se trouvait à l'intérieur d'une div ... La bordure n'a apparemment pas été calculée à la hauteur de la table. La bordure était donc là mais n'a pas été affichée.

Donner à la division environnante une marge inférieure de 1px a résolu le problème.

1
Tom

J'ai eu le même problème avec la bordure de table manquante. Ma solution est la suivante: 

table{
  border-collapse: collapse !important;
  border-spacing: 0px;
  border: 1px solid #DDD;
}

Et bordure pour les lignes de table:

table tr{
  border-bottom: 1px solid #DDD !important;
}

J'utilise Bootstrap dans ma mise en page et la table contient également des classes css bootstrap telles que "table bordée de tables bordée de tables"

Cette solution fonctionne pour moi, lorsque j'ai essayé la solution avec 

border-collapse: separate !important;

cela n'a pas fonctionné correctement pour moi. 

1
vanrado

travaillé pour moi réalisation de réponse @ Donald Payne

* (.table - classe bootstrap)

table.table {
    border-collapse: separate !important;
}

table.table tr,
table.table th,
table.table td {
    border-right-width: 0 !important;
    border-bottom-width: 0 !important;
    border-left: 1px solid #DDD !important;
    border-top: 1px solid #DDD !important;
}

table.table td:last-child,
table.table th:last-child {
    border-right: 1px solid #DDD !important;
}

table.table tr:last-child td {
    border-bottom: 1px solid #DDD !important;
}

table.table {
    border: 0 !important;
}

table.table thead tr:last-child th,
table.table thead tr:last-child td {
  border-bottom: 1px solid #DDD !important;
}

table.table tbody tr:first-child th,
table.table tbody tr:first-child td {
  border-top-width: 0 !important;
}
0
Дмитрий Сальников

Utilisez simplement border-spacing:0; espérons que cela résoudra votre problème.

0
Varun Arora

Border a commencé à disparaître lorsque le zoom du navigateur a été augmenté. J'ai pu le résoudre en procédant comme suit. Testé sous Chrome et Firefox.

padding: 0.5px !important
0
Jerome Anthony