Przewijanie tabeli w IE8

Question

W moim projekcie próbuję zrobić przewijanie w IE8 na tbody. Wiem, że można go przewinąć, podając tylko overflow: auto do tbody. Ale to nie działa w IE8. Aby działało w IE8, tbody musi mieć position: absolute (lub float: left zarówno dla thead i tbody). Jeśli sprawiam, że overflow: auto działa, to szerokości, które przypisałem do wartości procentowych th i td, są ignorowane. co z kolei nie pozwala, aby tr zajmował całą szerokość w thead i tbody. W związku z tym istnieje drażniąca przestrzeń między tr i tbody/thead.

Proszę przetestować ten demo w IE8. (działa dobrze w firefox i chrome)

i tutaj jest kod w fiddle.

Oto surowe punkty, których nie mogę zmienić

• Szerokość do td i th musi być w procentach.
• Nie mogę zmienić znacznika HTML
• To musi być rozwiązane za pomocą samego CSS.

Faktycznie, ja go rozwiązać z brudną poprawki brzmi następująco

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

Powyższy kod można również sprawdzić, dając wiele punktów do konkretnego td/TH w dostarczaniu narzędzi programistycznych

Powyższy kod wygląda dobrze, ale muszę podać pseudo selektor :after tylko do ostatniej kolumny ostatniej kolumny th i tr. Jeśli dam do każdego th i tr, to układ się zepsuje. a także dots musi zostać zwiększony, jeśli pusta przestrzeń między tr i tbody jest większa. Potem oczywiście można to osiągnąć tylko dynamicznie, czego nie mogę zrobić w moim obecnym projekcie.

PS: Może robię to zupełnie źle. Po prostu dzielę się swoimi wysiłkami, gdy osiągnąłem wynik bardzo bliski rezultatu:.

Answer 1

Znalazłem dwa sposoby rozwiązania tego problemu w IE8.

              1)     Dodanie dodatkowego td element width: 0px do tr „s o THEAD i tbody.

IE8 demo

              2)     Dodawanie ukryty list do treści after selektora pseudo.

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

Dodałem powyższe w warunkowym css. ponieważ problem był tylko w IE8. (Nie testowano w IE9 +)

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

IE8 demo

, że stosuje się drugi z nich, ponieważ jest proste.