Aggiungere la spaziatura tra due righe in una tabella non funziona in IE7

Ho una tabella in cui ho bisogno di una distanza tra due righe <tr> di tabella. L’ho fatto nel seguente modo:

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
{ 
}

Ma, questa soluzione non funziona con IE7. Può suggerire eventuali modifiche a questa classe, al fine di fare quel lavoro in IE7?

Nota: si Prega di non rispondere applicare classe separata per ogni riga nella tabella.

OriginaleL’autore Mayur | 2010-08-09

6 Replies
  1. 5

    Provare a rimuovere il border-spacing, modificare border-collapse al collasso e basta usare il td imbottitura per creare la spaziatura.

    Ha funzionato! Grazie..
    Purtroppo, imbottitura non funziona bene con vertical-align:middle

    OriginaleL’autore Phil Mander

  2. 3

    IE7 non supporta border-spacing a tutti. (E IE 8 con un solo valore). Per IE7 è possibile utilizzare l’attributo HTML cellspacing invece – ma anche solo con il valore di spaziatura verticale e orizzontale.

    L’unico cross browser in modo di avere spazio orizzontale in tabella è quello di utilizzare una riga di tabella vuota e cellulare.

    che è sbagliato, questo funziona in IE7. *border-collapse: expression('separate', cellSpacing = '5px');
    Puoi mostrare un po ‘ di documentazione su come funziona?
    cosa IE7, documentazione? Perché non basta eseguire che in IE7 e vedere se funziona? So che funziona così: 1. Anteponendo l’asterisco (*) prima della dichiarazione (ampiamente noto hack per IE7) e 2. L’applicazione di un’espressione ( il modo in cui MS ama le cose fatte). Potrei essere più dettagliato …..
    Ho dato per scontato che funzionasse, ma quello che mi interessa, era cellSpacing = '5px' come secondo argomento, che secondo MSDN normalmente essere una stringa di determinare il linguaggio di scripting, che ovviamente non è. Perché una variabile di assegnazione di lavoro, e perché non si applica all’elemento selezionato?
    hai fatto bene ad assumere funziona (ho provato). Penso che la valutazione dell’espressione che funziona in modo diverso in hack-modalità; in ogni caso, ‘5px’ nel mio libro è una stringa, in considerazione *border-collapse: expression('separate', cellSpacing = 5); e se avete il tempo, che troppo.

    OriginaleL’autore RoToRa

  3. 1

    Ho ottenuto l’effetto desiderato utilizzando border: 2px solid transparent solo per ie7 (è possibile utilizzare il condicional commenti per applicare questo stile solo per ie7).

    Nell’esempio ho aggiunto un 2px bordo trasparente in tutto il td, ma potrebbe essere i valori che si desidera, e funziona per bordi specifici come border-left o border-bottom.

    OriginaleL’autore amypellegrini

  4. 1

    Per me di cambiare il border-collapse proprietà per border-collapse: separate sul td elemento è quello che ha funzionato. Secondo il W3C, quando si utilizza collapse border-spacing e vuoto-celle di proprietà verrà ignorato. Quando si utilizza separate border-spacing proprietà sono onorato, e che è ciò che vogliamo.

    OriginaleL’autore amateur barista

  5. 1

    Ho trovato un fix tramite l’espressione:

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

    OriginaleL’autore cr1msaun

  6. 0

    Per aggiungere la spaziatura per il mio menu le voci che ho usato un padding-bottom attributo nel mio 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

    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>

    qui è il mio jsfiddle esempio:
    http://jsfiddle.net/IConway/htsqoe7j/

    OriginaleL’autore

Lascia un commento