css only - Переполнение таблицы с фиксированным заголовком

Question

Я пытаюсь создать таблицу, которая прокручивается в направлениях x и y, если содержимое больше, чем контейнер. Я также хочу, чтобы заголовок всегда был виден наверху. У меня есть первая часть, и заголовок всегда отображается наверху, однако размеры столбцов заголовка не совпадают с размерами таблицы.

Я создал эту скрипку:

http://jsfiddle.net/xxQQS/1/

я после КАС только решения.

EDIT: Кажется, что довольно много людей, которые, похоже, думают, что это можно сделать не только с помощью CSS. Это может быть правдой, однако, пожалуйста, не просто отправляйте сообщение, чтобы сказать «нет, этого не может быть сделано». Если вы можете объяснить, почему это невозможно сделать без CSS, я приму ваш ответ.

Answer 1

Создайте клон вашего стола. Для первой таблицы скройте все строки, кроме заголовков, с помощью visibility: hidden. Скройте заголовок другой таблицы, используя visibility: hidden. Поместите свои столы внутри разделов с настройками переполнения следующим образом:

<div style="overflow-x: hidden; width: 400px;"> 
    <div style="overflow-y: hidden; height: 20px;"> 
     <table id="head-only"> 
     </table> 
    </div> 
    <div style="overflow-y: scroll; height: 100px;"> 
     <table id="body-only"> 
     </table> 
    </div> 
</div> 

Answer 2

Для этого вам необходимо использовать JS. Проверьте это http://www.tablefixedheader.com/