Как создать заголовок фиксированной таблицы

Question

У меня есть таблица, которая автоматически создается с использованием php и pear html_table. Таблица имеет th-й ряд в верхней части, и у них есть класс assetHeader. В таблице также есть один столбец с левой стороны с классом timeHeaders. Таблица состоит из 96 строк с неопределенным количеством столбцов. Я пытаюсь исправить верхние столбцы заголовка и позволить пользователю прокручивать таблицу (это они всегда видят заголовок, к которому принадлежат ячейки). Я попытался обычные трюки CSS, чтобы исправить заголовки таблицы на месте, как это:

.main .assetHeader 
{ 
    /********************/ 
    position:fixed; 
    display:inline-block; 
    /*********************/ 
} 

Когда я делаю это, получается, что все заголовки уложены друг на друга, и только последняя неподвижна в левой части таблицы (и меньше фактической ширины столбца). Затем я попытался немного JQuery добавить класс к строке родительской таблицы, например:

$('.assetHeader').parent('tr').addClass('headerRow'); 

Соответствующий CSS аналогичен описанному выше, и это работает, но с неправильным форматированию й ячейки (все они отображаются и фиксируются на месте, но все они маленькие и больше не совпадают с столбцами, к которым они принадлежат). Я работаю здесь и там по этой функции уже пару недель. Я пробовал много разных подходов и включил только те, которые кажутся наиболее жизнеспособными. Плюс я не могу вспомнить все, что я пробовал, что не удалось. Любая помощь будет принята с благодарностью!

Answer 1

Хорошо, это заняло немного времени, чтобы получить это право, но я считаю, что решение прочное. В любом случае, мое тестирование ничего не сломало. Мне пришлось обернуть заголовки в вложенных div, а затем исправить div на месте и форматировать css. Вот начало моего кода таблицы.

echo "<div class='tableContainer'><div class='innerContainer'><form id='calendarForm' action='schedule.php' method='POST'>"; 
echo "<table border='0' width='100%'class='calendarTable'>"; 
echo "<tr><td width='1%'><img id='leftArrow' src='../images/buttons/arrow_left.ico'/></td><td width='2%'><input type='text' id='calDate' size='9' name='calDate'/></td><td width='1%'><img id='rightArrow' src='../images/buttons/arrow_right.ico'/></td>"; 
echo "<td align='center'><select name='deptSelect' class='deptSelect'><h1>" ?><?php 
         fill_dropdowns('DepartmentID','DepartmentName','Departments','x','DepartmentID',$dept); 
         ?><?php echo "</select></h1></td>"; 
echo "<td><input type='hidden' id='roleID' value='$role'/></td>"; 
echo "<td align='right'></td><td><input type='hidden' id='picked' value='".$pickedDate."'/></td></tr>"; 
echo "</table></form></div>"; 

Затем таблицы заполняются с использованием PHP груши, и, наконец, отображаются так:

echo "<div id='head_container'>"; 
    echo $head->display(); 
    echo "</div>"; 
    echo $table->display(); 

и использование CSS, чтобы сделать тяжелую работу:

.tableContainer 
{ 
    position:absolute; 
    width:100%; 
    margin-top:20px; 
    margin-left:-4px; 

} 
.innerContainer 
{ 
    position:fixed; 
    padding-top:5px; 
    height:45px; 
    width:100%; 
    margin-top:-50px; 
    background-color:#FFF; 
} 
#head_container 
{ 
    position:fixed; 
    width:100%; 
    height:35px; 
} 

Может быть не самой элегантный подход, но он делает эту работу на данный момент.

Answer 2

обернуть заголовок как так - добавить класс тоже, если вы хотите THEAD тег используется следующим образом в HTML

<thead> 
    <tr> 
     <th>Month</th> 
     <th>Savings</th> 
    </tr> 
</thead> 

Answer 3

не может быть сделано с помощью стандартных CSS, не может быть надежно кросс браузер в любом случае. Для этого вам придется использовать собственную разметку (не таблицы), или использовать плагин javascript, такой как http://www.fixedheadertable.com/.