Question

我有一个使用php和pear html_table自动生成的表。该表在顶部有一行，它们有一类assetHeader。该表左侧还有一列有一类timeHeaders。该表由不确定数量的列组成96行。我试图修复顶部标题列并允许用户滚动表（这是他们总是看到单元格所属的标题）。我尝试过正常的css技巧来修复表头，如下所示：

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

当我这样做时，结果是所有的标题都堆叠在一起，只有最后一个标题固定在表的左侧（并且它小于实际的列宽）。然后我尝试了一个小jquery将类添加到父表行，如下所示：

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

相应的css与上面的类似，这可以工作，但是不正确地格式化了第三个单元格（它们都显示并固定到位，但都很小，不再与它们所属的列对齐）。我已经在这个功能上工作了几个星期了。我尝试了许多不同的方法，只包括了两个看起来最可行的方法。另外，我记不起我尝试失败的一切。任何和所有的帮助将不胜感激！

Answer 1

像这样包装标题 - 如果你愿意，也可以添加一个类 thead标记在 HTML

中使用如下

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

Answer 2

无法通过标准CSS完成，无论如何都无法可靠地跨浏览器。您必须使用自定义标记（非表格元素），或使用http://www.fixedheadertable.com/等javascript插件。

Answer 3

好的，花了一点时间才能做到这一点，但我相信解决方案是可靠的。无论如何，我的测试没有破坏任何东西。我最终不得不将我的标题包装在嵌套的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 pear填充表格，最后显示如下：

    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;
}

也许不是最优雅的方法，但它现在可以胜任。

如何创建固定表头

3 个答案: