Ajouter un espacement entre deux lignes dans un tableau ne fonctionne pas sous IE7

J'ai un tableau où j'ai besoin d'un espacement entre deux rangées <tr> de table. Je l'ai fait de manière suivante:

table.fltrTbl
{
    margin:0px;
    padding:0px;
    border-collapse:separate;
    border-spacing:0 11px;  
}

table.fltrTbl td
{ 
    vertical-align:middle;
    padding-right:14px; 
    padding-left:0;
    padding-top:0;
    padding-bottom:0;
    margin:0;
}

table.fltrTbl tr
{ 
}

Mais, cette solution ne fonctionne pas avec IE7. Pouvez-vous suggérer des changements à cette classe afin de réaliser ce travail dans IE7?

Remarque: Veuillez ne pas répondre à appliquer catégorie distincte pour chaque tr dans le tableau.

OriginalL'auteur Mayur | 2010-08-09

  1. 5

    Essayez de supprimer la frontière de l'espacement, de changer border-collapse de l'effondrement et il suffit d'utiliser le td de rembourrage pour créer l'espacement.

    Travaillé! Merci..
    Malheureusement, le remplissage ne fonctionne pas bien avec vertical-align:middle

    OriginalL'auteur Phil Mander

  2. 3

    IE7 ne prend pas en charge border-spacing à tous. (Et IE 8 avec une seule valeur). Pour IE7, vous pouvez utiliser l'attribut HTML cellspacing au lieu - mais aussi avec une seule valeur à la fois l'espacement vertical et horizontal.

    Le seul navigateur croix de façon à avoir un écart horizontal dans le tableau est d'utiliser une ligne de tableau vide et de la cellule.

    c'est faux, il travaille dans IE7. *border-collapse: expression('separate', cellSpacing = '5px');
    Pouvez-vous montrer un peu de documentation sur comment cela fonctionne?
    ce que IE7 documentation? Pourquoi ne pas simplement exécuter que dans IE7 et voir si cela fonctionne? Je sais que ça fonctionne: 1. Ajoutant une étoile (*) avant de faire la déclaration (connue hack pour IE7) et 2. L'application d'une expression ( la façon dont MME aime les choses). Je pourrais être plus verbeux .....
    Je suppose que cela a fonctionné, mais ce qui m'intéresse, a été cellSpacing = '5px' comme deuxième argument, qui, selon la MSDN qui serait normalement une chaîne de déterminer le langage de script, dont il n'est évidemment pas le cas. Pourquoi une affectation de variable y travailler, et pourquoi a-t-elle s'appliquer à l'élément sélectionné?
    vous étiez en droit de supposer qu'il fonctionne (j'ai essayé). Je pense que l'évaluation de l'expression fonctionne différemment dans hack-mode; dans tous les cas, '5px" dans mon livre est une chaîne de caractères, envisager *border-collapse: expression('separate', cellSpacing = 5); et si vous avez le temps, que trop.

    OriginalL'auteur RoToRa

  3. 1

    J'ai obtenu l'effet désiré à l'aide de border: 2px solid transparent seulement pour ie7 (vous pouvez utiliser le condicional commentaires pour appliquer ce style uniquement à la version ie7).

    Dans l'exemple donné, j'ai ajouté un 2px bordure transparente tout autour de la td, mais il pourrait être la valeur que vous voulez, et cela fonctionne pour certaines frontières comme border-left ou border-bottom.

    OriginalL'auteur amypellegrini

  4. 1

    Pour me changer les border-collapse de la propriété à border-collapse: separate sur le td élément est ce qui a fonctionné. Selon le W3C, lors de l'utilisation de collapse frontière de l'espacement et de vide-cellules propriétés seront ignorés. Lors de l'utilisation de separate frontière de l'espacement de propriétés sont à l'honneur, et c'est ce que nous voulons.

    OriginalL'auteur amateur barista

  5. 1

    J'ai trouvé un fix par l'expression:

    *border-collapse: expression('separate', cellSpacing = '5px');

    OriginalL'auteur cr1msaun

  6. 0

    Pour ajouter un espacement de mes éléments de menu, j'ai utilisé un padding-bottom attribut dans mon css.

    <style>
div.c4 {
           font-family: Arial, Helvetica, sans-serif;
           font-size: 12px;
           font-weight: bold;
           text-align: left;
           color: #800000;
           padding-bottom: .5em;
        }
</style

    Le code HTML:

    <table width="15%" style="margin: auto;" >
<tr>
<th scope="col">
<div class="c4">Home</div>
<div class="c4">About Me</div>
<div class="c4">Photographs</div>
<div class="c4">Locations</div>
<div class="c4">Testimonials</div>
</th>
</tr>
</table>

    voici mon jsfiddle exemple:
    http://jsfiddle.net/IConway/htsqoe7j/

    OriginalL'auteur