如何创建固定表头答案

【问题标题】：How can I create a fixed table header如何创建固定表头
【发布时间】：2013-10-04 21:14:47
【问题描述】：

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

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

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

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

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

【问题讨论】：

我不认为你可以像那样拆分桌子......桌子很有趣。您可能必须将表头和表体拆分为单独的表，然后使用 javasript 匹配列宽。我不积极，但我认为这是唯一的方法
我很担心。一个小问题是所有列单元格都链接到其列标题并使用此信息将选定的单元格和顶部标题和侧标题信息发布到基于选择执行查询的表单。如果我把桌子拆开，我不会打破与上述信息的联系吗？

标签： php html css pear

【解决方案1】：

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

中使用thead标签如下

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

【讨论】：

刚刚尝试了这个建议。使用 php 和 pear，您不会添加像这样的标签。它是这样完成的 '$head =& $table->getHeader();'然后'$head->setHeaderContents(0, $i++, trim($val));'在 for 循环内。这可以完成并生成 thead 标签，但随后会破坏单元格数据的链接。
好的，我将thead标签放入文档并修复了指向单元格数据的链接。不幸的是，这会产生与我的代码相同的效果。该行是固定的，所有显示，但标题列现在更小，不再排列。感谢您的建议，现在我相信它必须与@iainvdw 的建议相结合。

【解决方案2】：

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

【讨论】：

我正在尝试使用您的建议，但它无法正常工作。它重新格式化标题，但不固定位置。现在标题列比表格大了。
好的，它现在已经固定到位。现在的问题是标题的列跨度为 2，现在它们没有跨度。有关如何解决此问题的任何想法？

【解决方案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;
}

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

【讨论】：