CSS pour faire apparaître une bordure de cellule vide?

Quel CSS dois-je utiliser pour faire apparaître une bordure de cellule même si la cellule est vide?

IE 7 spécifiquement.

Si je me souviens, la cellule n’existe pas dans certains IE sauf si elle est remplie de quelque chose …

Si vous pouvez mettre un   (espace insécable) pour combler le vide, cela fonctionnera généralement. Ou avez-vous besoin d’une solution CSS pure?

Apparemment, IE8 affiche les cellules par défaut, et vous devez le cacher avec empty-cells:hide Mais cela ne fonctionne pas du tout dans IE7 (qui se cache par défaut).

Une autre façon de s’assurer qu’il y a des données dans toutes les cellules:

  $(document).ready(function() { $("td:empty").html(" "); }); 

Si vous définissez la propriété border-collapse pour réduire, IE7 affichera les cellules vides. Il réduit aussi les bordures, donc ce n’est peut-être pas 100% ce que vous voulez

 td { border: 1px solid red; } table { border-collapse: collapse; }   Border-collapse Test  
 
test test
test test
test test
test

La question demandait une solution CSS, mais au cas où une solution HTML le ferait, voici une:

Essayez d’append ces deux atsortingbuts à l’élément table: frame = “box” rules = “all” comme ceci:

 

Je viens de trouver ce qui suit. C’est conforme aux normes mais cela ne fonctionne pas dans IE. soupir.

 empty-cells: show 

Je suis tombé sur cette question et je n’ai vu aucune réponse qui ait vraiment résolu le problème.

Le problème est dû au fait que IE7 ne voit aucun contenu interne pour la cellule. En termes de programmation, la cellule se traduit par une valeur null et, comme la plupart des choses, vous ne pouvez pas encadrer une valeur null ou effectuer une action sur celle-ci. Le navigateur a besoin d’un élément / object ayant une disposition pour appliquer une bordure / mise en page.

Même les

ou vides ne contiennent pas de contenu, donc il n’ya rien à rendre, ce qui entraîne à nouveau ce cas null .

Cependant, vous pouvez inciter le navigateur à penser que la cellule a du contenu, en donnant les propriétés de mise en page div/span vides. Le moyen le plus simple consiste à appliquer le zoom:1 style CSS zoom:1 .

 
Foo

Cette solution de contournement est préférable à l’utilisation d’un   , car cela ne gâche pas inutilement les lecteurs d’écran, et ne déforme pas la valeur de la cellule. Dans un navigateur plus récent, vous pouvez utiliser l’option empty-cell: .


Remarque: à la place du commentaire de Tomalak, il convient de comprendre que hasLayout n’a rien à voir avec null , c’est simplement une comparaison de la manière dont le navigateur interagit et rend les hasLayout de la même manière qu’une interaction entre une firebase database ou un langage de programmation. C’est un strech, mais j’ai pensé que cela pourrait être plus facile à comprendre pour ces programmeurs devenus des concepteurs Web.

Idéalement, vous ne devriez pas avoir de cellules vides dans un tableau. Soit vous avez une table de données, et il n’y a pas de données dans cette cellule spécifique (que vous devriez indiquer avec “-“, ou “n / a /”, ou quelque chose de tout aussi approprié, ou – si vous devez – & nbsp; ), ou vous avez une cellule qui doit couvrir une colonne ou une ligne, ou vous essayez d’obtenir une disposition avec une table pour laquelle vous devez utiliser CSS.

Pouvons-nous avoir un peu plus de détails?

Cette question est ancienne, mais toujours un très bon résultat dans Google, alors j’appendai ce que j’ai trouvé:

Ajouter simplement border-collapse: collapse au style de table a résolu ce problème pour moi dans IE7 (et n’a pas affecté la façon dont ils sont affichés dans FF, Chrome, etc.).

Mieux vaut éviter le code supplémentaire d’ajout de   ou autre élément d’espacement lorsque vous pouvez corriger avec CSS.

Je suppose que cela ne peut pas être fait avec CSS; Vous devez mettre un & nbsp; dans chaque cellule vide pour la bordure à afficher dans IE …

cellule vide seulement fixe Firefox (OUI j’ai vraiment eu ce problème dans Firefox) IE 7 et 8 étaient toujours problématiques ..

Cela a fonctionné pour moi dans Firefox 3.6.x, IE 7 et 8, Chrome et Safari:

==============================

 table { *border-collapse: collapse;} .sampleTD { empty-cells: show;} 

==============================

J’ai dû utiliser le * pour m’assurer que le style de la table était uniquement appliqué au navigateur IE.

Essayez ceci si vous ne pouvez pas utiliser un espace non cassable:

 var tn = document.createTextNode('\ '); yourContainer.appendChild(ta); 

Je crée un style div qui a la même couleur de police que l’arrière-plan de votre cellule et écris n’importe quoi (généralement un “-” “n / a” ou “vide”) pour donner le contenu de la cellule. Il apparaît si vous mettez la page en surbrillance, mais quand elle est affichée, elle ressemble à ce que vous voulez.

J’utilise un mélange de HTML et de CSS pour créer des grids de table avec plusieurs navigateurs:

html

css

 td{background-color:#fff;} 

Je n’ai vu aucun problème avec les navigateurs jusqu’à présent.

“IE” n’est plus un terme utile dans ce contexte maintenant qu’IE8 est sorti.

IE7 fait toujours “empty-cells: show” (ou alors on me dit … Vista). IE8 dans l’un de ses modes “Quirks” ou “IE7 Standards” fait toujours “empty-cells: hide”. IE8 dans le mode “Standards” est défini par défaut sur “empty-cells: show” et prend en charge l’atsortingbut via CSS.

Pour autant que je sache, tous les autres navigateurs ont correctement pris en charge cela pendant plusieurs années (je sais que cela a été ajouté dans Firefox 2).

Je prends ceci d’un autre site web mais:

 .sampletable { border-collapse: collapse;} .sampleTD { empty-cells: show;} 

Utilisez pour le CSS pour la table et l’élément TD respectivement.