Фиксированный заголовок таблицы.
создано 21.04.2012 08:55:07Здесь я дам вам кросс-браузерное решение одной из неприятных проблем, а именно проблемы фиксации заголовка таблицы при плавающих размерах столбцов.
В интернете есть много вариантов попыток решения этой задачи, но все они в результате сводятся к тому, что вам придется задать фиксированный размер столбцам. Это не есть правильный подход.
Первое, верстаем таблицу не совсем стандартно, то есть сначала в одном блоке создаем только заголовок и позиционируем его абсолютно. Потом уже рисуем всю таблицу во втором блоке позиционируя так, чтобы её заголовок оказался под первым заголовком.
К примеру так:
echo "<div id='divHeadFixed' style='position: absolute; z-index: 1; left: 5px; top: 15px; width: 100%;'>";
echo "<table id='' style='width: 100%; background-color: #cccccc; border-collapse: collapse;' >";
echo "<tr id='tableHeadFixed' class='tableHeader' style='font-size: 12px;' >";
echo "<td class='tableDataTd'> Area Name </td>";
echo "<td class='tableDataTd'> Price Type </td>";
echo "</tr>";
echo "</table>";
echo "</div>";
<div id='pricesPriceList' style='position: absolute; left: 5px; top: 15px; width: 100%; overflow: auto;'>
echo "<table id='pricesTable' style='width: 100%; background-color: #cccccc; border-collapse: collapse;'>";
echo "<tr id='sourceHead' style='font-size: 12px;' >";
echo "<td class='tableDataTd' > Area Name </td>";
echo "<td class='tableDataTd' > Price Type </td>";
echo "</tr>";
echo "<tr>";
echo "<td>test</td>";
echo "<td>test</td>";
echo "</tr>";
echo "</table>";
echo "</div>";
Итак, без javascript нам не обойтись. Используем его для вычисления и установки ширины столбцов основной таблицы. А потом применяем эти величины к заголовку.
function fixTableHeader()
{
var tdArray = document.getElementById('sourceHead').getElementsByTagName('td');
var tdArray2=document.getElementById('tableHeadFixed').getElementsByTagName('td');
document.getElementById('divHeadFixed').style.width =
document.getElementById('sourceHead').clientWidth+'px';
for (var i=0; i<tdArray.length; i++)
{
tdArray[i].style.width=tdArray[i].clientWidth+'px';
}
for (var i=0; i<tdArray.length; i++)
{
tdArray2[i].style.width=tdArray[i].style.width;
}
}
«Важнейшей задачей для нас является сейчас: учиться и учиться» В.И. Ленин
