Как я могу позволить телу прокручивать тело, но держать его неподвижно на месте?
Я пишу страницу, где мне нужна таблица HTML для поддержания заданного размера. Мне нужны заголовки в верхней части таблицы, чтобы они всегда оставались там, но мне также нужно, чтобы тело таблицы прокручивалось независимо от того, сколько строк добавлено в таблицу. Вспомните мини-версию Excel. Это кажется простой задачей, но почти каждое решение, которое я нашел в Интернете, имеет некоторый недостаток. Как я могу решить это?
18 ответов
Я должен был найти тот же ответ. Лучший пример, который я нашел, это http://www.cssplay.co.uk/menu/tablescroll.html - я обнаружил, что пример №2 хорошо сработал для меня. Вам нужно будет установить высоту внутренней таблицы с помощью Java Script, остальное - CSS.
Я нашел DataTables довольно гибким. Хотя его версия по умолчанию основана на jquery, есть также плагин AngularJs.
Я увидел отличное решение Шона Хэдди для подобного вопроса и позволил себе внести некоторые изменения:
- Используйте классы вместо ID, чтобы один сценарий jQuery можно было повторно использовать для нескольких таблиц на одной странице
- Добавлена поддержка семантических элементов таблицы HTML, таких как caption, thead, tfoot и tbody
- Добавлена опция полосы прокрутки, чтобы она не отображалась для таблиц, которые "короче" высоты прокрутки
- Скорректирована ширина прокрутки div, чтобы полоса прокрутки доходила до правого края таблицы
- Сделал концепцию доступной
- использование aria-hidden="true" для вставленного статического заголовка таблицы
- и оставив оригинальную thead на месте, просто скрытый с помощью jQuery и установлен
aria-hidden="false"
- Показаны примеры нескольких таблиц с разными размерами
Шон сделал тяжелую работу, хотя. Спасибо Мэтту Берленду за то, что он указал на необходимость поддержки tfoot.
Пожалуйста, убедитесь сами на http://jsfiddle.net/jhfrench/eNP2N/
Что вам нужно это:
1) иметь тело таблицы ограниченной высоты, поскольку прокрутка происходит только тогда, когда содержимое больше, чем окно прокрутки. тем не мение tbody не может быть измерен, и вы должны отобразить его как block сделать так:
tbody {
overflow-y: auto;
display: block;
max-height: 10em; // For example
}
2) Повторно синхронизируйте заголовки таблицы и ширину столбцов тела таблицы, чтобы сделать последние block сделал это не связанным элементом. Единственный способ сделать это - симулировать синхронизацию, применяя одинаковую ширину столбцов к обоим.
Тем не менее, так как tbody сам по себе block Теперь он больше не может вести себя как table, Так как вам все еще нужна table поведение для правильного отображения столбцов, решение состоит в том, чтобы запросить отображение каждой строки как отдельного tables:
thead {
display: table;
width: 100%; // Fill the containing table
}
tbody tr {
display: table;
width: 100%; // Fill the containing table
}
(Обратите внимание, что, используя эту технику, вы больше не сможете охватывать строки).
Как только это будет сделано, вы можете обеспечить ширину столбцов, чтобы иметь одинаковую ширину в обоих thead а также tbody, Вы не могли этого:
- индивидуально для каждого столбца (с помощью определенных классов CSS или встроенного стиля), что довольно утомительно для каждого экземпляра таблицы;
- равномерно для всех столбцов (через
th, td { width: 20%; }если у вас есть 5 столбцов, например), что более практично (не нужно устанавливать ширину для каждого экземпляра таблицы), но не может работать для любого количества столбцов - равномерно для любого количества столбцов через фиксированный макет таблицы.
Я предпочитаю последний вариант, который требует добавления:
thead {
table-layout: fixed; // Same layout for all cells
}
tbody tr {
table-layout: fixed; // Same layout for all cells
}
th, td {
width: auto; // Same width for all cells, if table has fixed layout
}
Смотрите демо здесь, разветвленный от ответа на этот вопрос.
Вы пытались использовать thead и tbody и устанавливать фиксированную высоту для tbody с помощью overflow:scroll?
Какие у вас целевые браузеры?
РЕДАКТИРОВАТЬ: Это работало хорошо (почти) в Firefox - добавление вертикальной полосы прокрутки также вызвало необходимость горизонтальной полосы прокрутки - гадость. IE просто устанавливает высоту каждого td на то, что я указал высоту tbody. Вот лучшее, что я мог придумать:
<html>
<head>
<title>Blah</title>
<style type="text/css">
table { width:300px; }
tbody { height:10em; overflow:scroll;}
td { height:auto; }
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>One</th><th>Two</th>
</td>
</tr>
</thead>
<tbody>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
</tbody>
</table>
</body>
</html>
Изменить: Это очень старый ответ, и он здесь для процветания, просто чтобы показать, что он был когда-то поддержан еще в 2000-х годах, но отброшен, потому что стратегия браузеров в 2010-х годах заключалась в соблюдении спецификаций W3C, даже если некоторые функции были удалены: Таблица с прокруткой и фиксированным заголовком / Нижний колонтитул был неуклюже указан до HTML5.
Плохие новости
К сожалению, не существует элегантного способа обработки прокручиваемой таблицы с фиксированной thead/tfoot потому что спецификации HTML/CSS не очень ясны в отношении этой функции.
Пояснения
Хотя спецификация HTML 4.01 гласит thead/tfoot/tbody используются (представлены?) для прокрутки тела таблицы:
Строки таблицы могут быть сгруппированы [...] с использованием элементов THEAD, TFOOT и TBODY [...]. Это разделение позволяет агентам пользователя поддерживать прокрутку тел таблицы независимо от ее головы и ноги.
Но функция рабочей прокручиваемой таблицы в FF 3.6 была удалена в FF 3.7, потому что считается ошибкой, потому что не соответствует спецификациям HTML/CSS. Смотрите это и это комментирует ошибки FF.
Совет разработчиков сети Mozilla
Ниже приведена упрощенная версия полезных советов MDN для прокручиваемой таблицы.
посмотреть эту заархивированную страницу или текущую французскую версию
<style type="text/css">
table {
border-spacing: 0; /* workaround */
}
tbody {
height: 4em; /* define the height */
overflow-x: hidden; /* esthetics */
overflow-y: auto; /* allow scrolling cells */
}
td {
border-left: 1px solid blue; /* workaround */
border-bottom: 1px solid blue; /* workaround */
}
</style>
<table>
<thead><tr><th>Header
<tfoot><tr><th>Footer
<tbody>
<tr><td>Cell 1 <tr><td>Cell 2
<tr><td>Cell 3 <tr><td>Cell 4
<tr><td>Cell 5 <tr><td>Cell 6
<tr><td>Cell 7 <tr><td>Cell 8
<tr><td>Cell 9 <tr><td>Cell 10
<tr><td>Cell 11 <tr><td>Cell 12
<tr><td>Cell 13 <tr><td>Cell 14
</tbody>
</table>
Однако MDN также говорит, что это больше не работает на FF:-(
Я также проверил на IE8 => таблица не прокручивается либо:-((
Не уверен, что кто-то все еще смотрит на это, но он, как я делал это ранее, должен использовать две таблицы для отображения одной исходной таблицы - сначала только строку заголовка исходной таблицы и никаких строк тела таблицы (или пустую строку тела для это подтверждают).
Второй находится в отдельном элементе div и не имеет заголовка, а содержит только исходные строки тела таблицы. Затем отдельный div становится прокручиваемым.
Вторая таблица в ее div находится чуть ниже первой таблицы в HTML и выглядит как отдельная таблица с фиксированным заголовком и прокручиваемой нижней частью. Я проверял это только в Safari, Firefox и IE (последние версии каждой из них весной 2010 года), но он работал во всех из них.
Единственной проблемой было то, что первая таблица не будет проверяться без тела (валидатор W3.org - строгий XHTML 1.0), и когда я добавляю таблицу без содержимого, она вызывает пустую строку. Вы можете использовать CSS, чтобы сделать это невидимым, но оно все равно будет занимать место на странице.
Это решение работает в Chrome 35, Firefox 30 и IE 11 (другие версии не тестировались)
Его чистый CSS: http://jsfiddle.net/ffabreti/d4sope1u/
Все настроено на отображение: блок, таблице нужна высота:
table {
overflow: scroll;
display: block; /*inline-block*/
height: 120px;
}
thead > tr {
position: absolute;
display: block;
padding: 0;
margin: 0;
top: 0;
background-color: gray;
}
tbody > tr:nth-of-type(1) {
margin-top: 16px;
}
tbody tr {
display: block;
}
td, th {
width: 70px;
border-style:solid;
border-width:1px;
border-color:black;
}
Вот код, который действительно работает для IE и FF (по крайней мере):
<html>
<head>
<title>Test</title>
<style type="text/css">
table{
width: 400px;
}
tbody {
height: 100px;
overflow: scroll;
}
div {
height: 100px;
width: 400px;
position: relative;
}
tr.alt td {
background-color: #EEEEEE;
}
</style>
<!--[if IE]>
<style type="text/css">
div {
overflow-y: scroll;
overflow-x: hidden;
}
thead tr {
position: absolute;
top: expression(this.offsetParent.scrollTop);
}
tbody {
height: auto;
}
</style>
<![endif]-->
</head>
<body>
<div >
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="background: lightgreen;">user</th>
<th style="background: lightgreen;">email</th>
<th style="background: lightgreen;">id</th>
<th style="background: lightgreen;">Y/N</th>
</tr>
</thead>
<tbody align="center">
<!--[if IE]>
<tr>
<td colspan="4">on IE it's overridden by the header</td>
</tr>
<![endif]-->
<tr>
<td>user 1</td>
<td>user@user.com</td>
<td>1</td>
<td>Y</td>
</tr>
<tr class="alt">
<td>user 2</td>
<td>user@user.com</td>
<td>2</td>
<td>N</td>
</tr>
<tr>
<td>user 3</td>
<td>user@user.com</td>
<td>3</td>
<td>Y</td>
</tr>
<tr class="alt">
<td>user 4</td>
<td>user@user.com</td>
<td>4</td>
<td>N</td>
</tr>
<tr>
<td>user 5</td>
<td>user@user.com</td>
<td>5</td>
<td>Y</td>
</tr>
<tr class="alt">
<td>user 6</td>
<td>user@user.com</td>
<td>6</td>
<td>N</td>
</tr>
<tr>
<td>user 7</td>
<td>user@user.com</td>
<td>7</td>
<td>Y</td>
</tr>
<tr class="alt">
<td>user 8</td>
<td>user@user.com</td>
<td>8</td>
<td>N</td>
</tr>
</tbody>
</table>
</div>
</body></html>
Я изменил исходный код, чтобы сделать его более понятным, а также чтобы он работал нормально в IE и FF.
Оригинальный код ЗДЕСЬ
Это вызвало у меня огромную головную боль, пытаясь реализовать такую сетку для нашего приложения. Я испробовал все различные техники, но у каждого из них были проблемы. Самое близкое, что я нашел, - это использование плагина jQuery, такого как Flexigrid (альтернативы можно найти на http://www.ajaxrain.com/), но, похоже, он не поддерживает таблицы шириной 100%, а это то, что мне было нужно.
То, что я в итоге делал, катало меня; Firefox поддерживает прокрутку tbody элементы, чтобы я просматривал браузер и использовал соответствующий CSS (установил высоту, переполнение и т. д., спрашивал, хотите ли вы больше подробностей), чтобы сделать эту прокрутку, а затем для других браузеров я использовал две отдельные таблицы, установленные для использования table-layout: fixed который использует алгоритм определения размера, который гарантированно не переполняет указанный размер (обычные таблицы будут расширяться, когда содержимое слишком широкое, чтобы уместиться). Придав обеим таблицам одинаковую ширину, я смог выстроить их столбцы. Я обернул второй в наборе элементов для прокрутки, и немного поиграв в покер с полями и т. Д. Мне удалось получить тот внешний вид, который я хотел.
Извините, если этот ответ звучит немного расплывчато; Я пишу быстро, потому что у меня мало времени. Оставьте комментарий, если хотите, чтобы я расширил его дальше!
Извините, я не прочитал все ответы на ваш вопрос.
Да, здесь то, что вы хотите (я уже сделал)
Вы можете использовать две таблицы с одинаковыми именами классов для одинакового стиля: одна только с заголовком таблицы, а другая с вашими строками. Теперь поместите эту таблицу в div с фиксированной высотой с помощью overflow-y:auto OR scroll.
Live JsFiddle
Это возможно только с HTML и CSS
table.scrollTable {
border: 1px solid #963;
width: 718px;
}
thead.fixedHeader {
display: block;
}
thead.fixedHeader tr {
height: 30px;
background: #c96;
}
thead.fixedHeader tr th {
border-right: 1px solid black;
}
tbody.scrollContent {
display: block;
height: 262px;
overflow: auto;
}
tbody.scrollContent td {
background: #eee;
border-right: 1px solid black;
height: 25px;
}
tbody.scrollContent tr.alternateRow td {
background: #fff;
}
thead.fixedHeader th {
width: 233px;
}
thead.fixedHeader th:last-child {
width: 251px;
}
tbody.scrollContent td {
width: 233px;
}<table cellspacing="0" cellpadding="0" class="scrollTable">
<thead class="fixedHeader">
<tr class="alternateRow">
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>End of Cell Content 1</td>
<td>End of Cell Content 2</td>
<td>End of Cell Content 3</td>
</tr>
</tbody>
</table>Основная проблема, с которой я столкнулся в связи с приведенными выше предложениями, заключалась в том, чтобы подключить tablesorter.js и иметь возможность перемещать заголовки для таблицы, ограниченной определенным максимальным размером. В конце концов я наткнулся на плагин jQuery.floatThead, который предоставил плавающие заголовки и позволил сортировке продолжать работать.
У этого также есть хорошая страница сравнения, показывающая себя против подобных плагинов.
Вот моя альтернатива. Он также использует различные DIV для заголовка, тела и нижнего колонтитула, но синхронизируется для изменения размера окна и с поиском, прокруткой, сортировкой, фильтрацией и позиционированием:
Нажмите на кнопки Jazz, Classical..., чтобы увидеть таблицы. Он настроен так, что он адекватен, даже если JavaScript отключен.
Кажется, хорошо на IE, FF и WebKit (Chrome, Safari).
Я делаю это с помощью JavaScript (без библиотеки) и CSS - тело таблицы прокручивается со страницей, и таблица не должна быть фиксированной ширины или высоты, хотя каждый столбец должен иметь ширину. Вы также можете продолжить сортировку.
В принципе:
В HTML создайте элементы div контейнера, чтобы расположить строку заголовка таблицы и тело таблицы, а также создайте div "mask", чтобы скрыть тело таблицы при ее прокрутке за заголовком.
В CSS преобразуйте части таблицы в блоки
В Javascript, получить ширину таблицы и сопоставить ширину маски... получить высоту содержимого страницы... измерить положение прокрутки... манипулировать CSS, чтобы установить положение строки заголовка таблицы и высоту маски
Вот javascript и демонстрационная версия jsFiddle.
// get table width and match the mask width
function setMaskWidth() {
if (document.getElementById('mask') !==null) {
var tableWidth = document.getElementById('theTable').offsetWidth;
// match elements to the table width
document.getElementById('mask').style.width = tableWidth + "px";
}
}
function fixTop() {
// get height of page content
function getScrollY() {
var y = 0;
if( typeof ( window.pageYOffset ) == 'number' ) {
y = window.pageYOffset;
} else if ( document.body && ( document.body.scrollTop) ) {
y = document.body.scrollTop;
} else if ( document.documentElement && ( document.documentElement.scrollTop) ) {
y = document.documentElement.scrollTop;
}
return [y];
}
var y = getScrollY();
var y = y[0];
if (document.getElementById('mask') !==null) {
document.getElementById('mask').style.height = y + "px" ;
if (document.all && document.querySelector && !document.addEventListener) {
document.styleSheets[1].rules[0].style.top = y + "px" ;
} else {
document.styleSheets[1].cssRules[0].style.top = y + "px" ;
}
}
}
window.onscroll = function() {
setMaskWidth();
fixTop();
}
Если у вас достаточно низкие стандарты;) вы можете разместить таблицу, которая содержит только заголовок, прямо над таблицей, которая имеет только тело. Он не будет прокручиваться горизонтально, но если вам это не нужно...
Для меня ничего, связанного с прокруткой, действительно не работало, пока я не убрал ширину из таблицы CSS. Изначально таблица CSS выглядела так:
.table-fill {
background: white;
border-radius:3px;
border-collapse: collapse;
margin: auto;
width: 100%;
max-width: 800px;
padding:5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
animation: float 5s infinite;
}
Как только я убрал ширину:100%; все функции прокрутки начали работать.
Если нормально использовать JavaScript, вот мое решение. Создайте таблицу с фиксированной шириной во всех столбцах (пикселях!), Добавьте в таблицу класс Scrollify и добавьте этот javascript + jquery 1.4.x set height в css или style!
Протестировано в: Opera, Chrome, Safari, FF, IE5.5(сбой Epic script), IE6, IE7, IE8, IE9
//Usage add Scrollify class to a table where all columns (header and body) have a fixed pixel width
$(document).ready(function () {
$("table.Scrollify").each(function (index, element) {
var header = $(element).children().children().first();
var headerHtml = header.html();
var width = $(element).outerWidth();
var height = parseInt($(element).css("height")) - header.outerHeight();
$(element).height("auto");
header.remove();
var html = "<table style=\"border-collapse: collapse;\" border=\"1\" rules=\"all\" cellspacing=\"0\"><tr>" + headerHtml +
"</tr></table><div style=\"overflow: auto;border:0;margin:0;padding:0;height:" + height + "px;width:" + (parseInt(width) + scrollbarWidth()) + "px;\">" +
$(element).parent().html() + "</div>";
$(element).parent().html(html);
});
});
//Function source: http://www.fleegix.org/articles/2006-05-30-getting-the-scrollbar-width-in-pixels
//License: Apache License, version 2
function scrollbarWidth() {
var scr = null;
var inn = null;
var wNoScroll = 0;
var wScroll = 0;
// Outer scrolling div
scr = document.createElement('div');
scr.style.position = 'absolute';
scr.style.top = '-1000px';
scr.style.left = '-1000px';
scr.style.width = '100px';
scr.style.height = '50px';
// Start with no scrollbar
scr.style.overflow = 'hidden';
// Inner content div
inn = document.createElement('div');
inn.style.width = '100%';
inn.style.height = '200px';
// Put the inner div in the scrolling div
scr.appendChild(inn);
// Append the scrolling div to the doc
document.body.appendChild(scr);
// Width of the inner div sans scrollbar
wNoScroll = inn.offsetWidth;
// Add the scrollbar
scr.style.overflow = 'auto';
// Width of the inner div width scrollbar
wScroll = inn.offsetWidth;
// Remove the scrolling div from the doc
document.body.removeChild(
document.body.lastChild);
// Pixel width of the scroller
return (wNoScroll - wScroll);
}
Редактировать: Фиксированная высота.