Таблица прокрутки тела в IE8

Question

В своем проекте я пытаюсь сделать tbody прокрутите в IE8. Я знаю, что это можно прокрутить, просто дав overflow: auto в tbody, Но это не работает в IE8. Чтобы он работал в IE8, tbody должен быть дан position: absolute (или же float: left как для thead а также tbody). Если я сделаю overflow: auto работать тогда ширину, которую я назначил th а также td в процентах игнорируется. что, в свою очередь, не позволяя tr занимать всю ширину в thead а также tbody, Следовательно, есть раздражающее пространство между tr а также tbody / thead,

Пожалуйста, проверьте это демо в IE8. (отлично работает в Firefox и Chrome)

и вот код в скрипке.

Вот строгие моменты, которые я не могу изменить

• Ширина до td а также th должен быть в процентах.
• Я не могу изменить разметку HTML
• Это должно быть решено с использованием только CSS.

На самом деле, я решил это с грязным исправлением, которое выглядит следующим образом

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

Приведенный выше код также можно проверить, указав множество точек для определенного тд / т в инструментах разработчика.

Приведенный выше код выглядит нормально, но мне нужно дать :after псевдо-селектор только для первого ряда последнего столбца th а также tr, Если я дам каждому th а также tr тогда макет портится. а также dots должно быть увеличено, если между tr а также tbody Больше. Тогда, конечно, это может быть достигнуто только динамически, чего я не могу сделать в моем текущем проекте.

PS: возможно я делаю это совершенно неправильно. Я просто делюсь своими усилиями, где я достиг очень близкого к результату.

Answer 1

Я нашел два способа решить эту проблему в IE8.

1) Добавление дополнительных td элемент width: 0px в trиз thead и tbody.

IE8 демо

2) Добавление скрытого письма к содержанию after псевдо-селектор.

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

Я добавил выше в условных CSS. потому что проблема была только в IE8. (Я не тестировал в IE9 +)

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

IE8 демо

Я использовал последний, потому что это просто.