Исправлен заголовок и нижний колонтитул в таблице и div?

У меня есть таблица, которая находится в прокручиваемом окне div. Заголовок заключен в тег thead, а нижний колонтитул находится в отдельном тесте внизу. Мне нужно, чтобы они были привязаны к экрану, сохраняя при этом их ориентацию/ориентацию.Исправлен заголовок и нижний колонтитул в таблице и div?

Я попытался

position:absolute

и перекосы все.

Смотрите следующую скрипку: http://jsfiddle.net/jkgt3wdm/

Я открыт для всех предложений.

EDIT: также необходимо прокручивать влево и вправо.

источник

2016-03-11 Ethans123

FYI - футер строки должны идти в элемент, а не второй –

Если честно, самым простым способом справиться с этим было бы использование тех вещей, которые уже построены. Мессинг со столом не всегда легко, и если кто-то уже нашел безопасный способ сделать это, почему бы не использовать его :)

Я рекомендую использовать это: https://github.com/jmosbech/StickyTableHeaders

источник

2016-03-11 15:16:27 Xposedbones

Теперь я возился с ним, но мне трудно наследовать ширину родительской таблицы при прокрутке влево/вправо. – Ethans123

Код основан на этом вопросе stackoverflow, http://stackoverflow.com/questions/1030043/html-table-headers-always-visible-at-top-of-window-when-viewing-a-large-table/ 1041566 # 1041566 – Xposedbones

Убедившись, что ваш подвал находится в <tfoot>, вы можете это исправить, и заголовок в верхней и нижней части страницы с:

position:fixed;

, а затем поместить заголовок на:

top:0;

и сноска на:

bottom:0;

Вы все равно придется настраивать ширину ваших <tbody> клеток, но это должно дать вам липкий верхний и нижний колонтитулы.

Это то, что вы ищете: http://jsfiddle.net/jkgt3wdm/6/

источник

2016-03-11 15:18:26

Можете ли вы помочь с прокруткой влево и вправо? Также поддерживая ширину tbody, унаследованную от thead и tfoot? Если вы можете нажать в правильном направлении относительно этого, я буду отмечать как верхний ответ. – Ethans123

Вы используете Bootstrap? Если это так, мое решение может противоречить стилям класса CSS. –

Я действительно использую бутстрап, но это не имеет значения, правильно? единственная проблема заключается в том, что он не поддерживает выравнивание ячеек в tbody ... – Ethans123

-1

Проверьте это как быстрое решение:

.header{ 
    width:100%; 
    height:20px; 
    background-color:blue; 
} 
.footer{ 
    width:100%; 
    height:20px; 
    background-color:green; 
} 
.content{ 

    overflow-y:auto; 
}

http://jsfiddle.net/jkgt3wdm/7/

источник

2016-03-11 15:20:29 nullbyte

Это не делает ничего, кроме как положить элементы вверху и внизу страницы, и эти элементы прокручиваются вне поля зрения. OP хочет, чтобы строки заголовка и нижнего колонтитула таблицы всегда были в поле зрения. –

Исправлен заголовок и нижний колонтитул в таблице и div?

ответ

Смежные вопросы