Как сделать HTML-таблицу с фиксированными заголовками (закрепить их)?

Я думаю, что следующий код на основе jQuery должен работать в большинстве браузеров. Вот принцип работы этого метода:

• Клонируем таблицу, которая должна иметь фиксированные заголовки, и помещаем клон над оригиналом.
• Удаляем тело таблицы из клона.
• Удаляем заголовки таблицы из оригинала.
• Применяем ширину столбцов (предварительно сохранили эту ширину).

Вот код:

function scrolify(tblAsJQueryObject, height){
var oTbl = tblAsJQueryObject;
// для очень длинных таблиц вы можете удалить 4 следующие линии
// и поместить таблицу в ДИВ и назначить ему высоту и свойство overflow
var oTblDiv = $("<div/>");
oTblDiv.css(''height'', height);
oTblDiv.css(''overflow'',''scroll'');
oTbl.wrap(oTblDiv);
// сохраняем оригинальную ришину
oTbl.attr("data-item-original-width", oTbl.width());
oTbl.find(''thead tr td'').each(function(){
$(this).attr("data-item-original-width",$(this).width());
});
oTbl.find(''tbody tr:eq(0) td'').each(function(){
$(this).attr("data-item-original-width",$(this).width());
});
// клонируем оригинальную таблицу
var newTbl = oTbl.clone();
// удаляем заголовки из оригинальной таблицы
oTbl.find(''thead tr'').remove();
// удаляем тело таблицы из новой таблицы
newTbl.find(''tbody tr'').remove();
oTbl.parent().parent().prepend(newTbl);
newTbl.wrap("<div/>");
// заменяем исходную ширину столбца
newTbl.width(newTbl.attr(''data-item-original-width''));
newTbl.find(''thead tr td'').each(function(){
$(this).width($(this).attr("data-item-original-width"));
});
oTbl.width(oTbl.attr(''data-item-original-width''));
oTbl.find(''tbody tr:eq(0) td'').each(function(){
$(this).width($(this).attr("data-item-original-width"));
});
}
$(document).ready(function(){
scrolify($(''#tblNeedsScrolling''), 160); // 160 is height
});

<div style="width:300px;border:2px solid black;">
<table border="1" width="100%" id="tblNeedsScrolling">
<thead>
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
</thead>
<tbody>
<tr><td>Ряд 1, столбец 1</td><td>Ряд 1, столбец 2</td></tr>
<tr><td>Ряд 2, столбец 1</td><td>Ряд 2, столбец 2</td></tr>
<tr><td>Ряд 3, столбец 1</td><td>Ряд 3, столбец 2</td></tr>
<tr><td>Ряд 4, столбец 1</td><td>Ряд 4, столбец 2</td></tr>
<tr><td>Ряд 5, столбец 1</td><td>Ряд 5, столбец 2</td></tr>
<tr><td>Ряд 6, столбец 1</td><td>Ряд 6, столбец 2</td></tr>
<tr><td>Ряд 7, столбец 1</td><td>Ряд 7, столбец 2</td></tr>
<tr><td>Ряд 8, столбец 1</td><td>Ряд 8, столбец 2</td></tr>
</tbody>
</table>
</div>