Тело таблицы объединяется с заголовком в прокручиваемой таблице HTML ⇐ CSS

[Anonymous]

На гибридной веб-странице один раздел содержит прокручиваемую таблицу имен с некоторой информацией о них. В идеале эта таблица должна иметь фиксированные заголовки и прокручиваемые строки ниже. Но я не могу заставить это работать правильно.

Очевидная проблема здесь заключается в том, что (по крайней мере, в последней версии Chrome) данные строк объединяются с заголовками (не перезаписывают их), так что оба значения занимают одно и то же пространство, что затрудняет их чтение. Еще одна проблема — заголовки смещаются (всего на несколько пикселей, но смещаются) при прокрутке таблицы. Хотя с последним можно жить, оно кажется непрофессиональным и неидеальным.

Я попробовал вставить теги thead ... /thead tbody ... /tbody в соответствующие места... в результате выравнивание столбцов больше не совпадает между заголовком и телом.

Я нашел около тридцати!! ответы на такого рода проблемы в этом вопросе. Если я удалю спецификацию top:0 из атрибутов th, заголовок прокрутится вместе с телом. То же самое с позицией: липкий.

Если я удалю «overflow:auto» из tbody, как это предлагается в сообщении выше, я потеряю возможность прокрутки, и таблица вырастет за пределы желаемого окна.

Некоторые из «рабочих решений» в этом посте включают JavaScript, и мы предпочитаем по возможности избегать этой сложности. Другие не описывают, что делают, поэтому за ними сложно следить.

Что я делаю не так, что эта таблица ведет себя таким образом?

.fixed_header_watchers tbody { дисплей: блок; переполнение: авто; высота: 300 пикселей; ширина: 100%; } .fixed_header_watchers th { верх: 0; положение: липкое; отступ: 0 0 пикселей; граница-коллапс: коллапс; размер шрифта: 100%; граница: нет; пробел: nowrap; отступ слева: 5 пикселей; } * { заполнение: 0; маржа: 0; Наблюдатель Присоединился Последние 40 Борец
@wrestler 08:18 0,3 м 39 Аллен Эванс - AME Arts 08:16 0,0 м 38 Ct Пират
@Пропал 08:13 0,0 м 37 Будет 08:12 0,0 м 36 Derth Of 13
11 22 сентября, 56,0 недель 08:11 5,9 м 35 Джой Роббинс
@joyorobbins6838 08:11 6,7 м 34 Спанки
@spanky 08:07 11,2 м 33 Искусство Боба Кроуфорда
24 23 сентября, 2,0 недели 08:04 0,0 м 32 (Баркли)107 Скитальцев 08:03 0,0 м