Scorrimento torsione del tavolo in IE8

Question

Nel mio progetto, sto cercando di fare lo scroll tbody in IE8. So che si può scorrere semplicemente dando overflow: auto a tbody. Ma questo non funziona in IE8. Per farlo funzionare in IE8, è necessario assegnare o thead e tbody). Se eseguo il lavoro overflow: auto, le larghezze che ho assegnato alle proporzioni th e td vengono ignorate. che a sua volta non consente a tr di occupare l'intera larghezza in thead e tbody. Quindi, c'è uno spazio irritante tra tr e tbody/thead.

Verificare questo demo in IE8. (funziona bene in firefox e chrome)

e qui è il codice in fiddle.

Ecco i punti severe, che non posso cambiare

• larghezza di td e th deve essere in percentuale.
• Non riesco a modificare il codice HTML
• Deve essere risolto utilizzando solo CSS.

In realtà, ho risolto con una correzione sporca che è la seguente

th:after,td:after{ /* only to the last column, first occurence */ 
    content: "..................................................."; 
    visibility: hidden; 
} 

Il codice di cui sopra può anche essere controllato dando molti punti ad una specifica td/esimo nei tool di sviluppo

Il codice sopra sembra ok ma ho bisogno di dare lo pseudo-selettore solo alla prima riga dell'ultima colonna th e tr. Se do a ogni th e tr il layout sta facendo casino. e anche lo dots deve essere aumentato se lo spazio vuoto tra tr e tbody è più. Quindi naturalmente questo potrebbe essere realizzato solo in modo dinamico, cosa che non posso fare nel mio attuale progetto.

PS: Forse lo faccio completamente storto. Sto solo condividendo i miei sforzi in cui ho raggiunto molto vicino al risultato.

Answer 1

Ho trovato due modi per risolvere questo problema in IE8.

              1)     Aggiunta aggiuntivo td elemento di width: 0px a tr 's di thead e tbody.

IE8 demo

              2)     Aggiunta di una lettera nascosta al contenuto di after selettore pseudo.

tr:after{ 
     content: "."; 
     visibility: hidden; 
    } 

Ho aggiunto il precedente in css condizionale. perché il problema era solo in IE8. (non ho testato in IE9 +)

<!--[if IE 8]> 
     <style> 
      /* the above css code here */ 
     </style> 
    <![endif]--> 

IE8 demo

ho usato quest'ultimo uno perché è semplice.