Php 如何创建固定的表格标题

我有一个使用php和pear html_表自动生成的表。表的顶部有第十行，它们有一个assetHeader类。该表的左侧还有一个第th列，其中包含一类TimeHeader。该表由96行和不确定数量的列组成。我试图修复顶部标题列，并允许用户滚动表格（这是因为他们总是看到单元格所属的标题）。我已经尝试了常规css技巧，将表头固定在适当的位置，如下所示：

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

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

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

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

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

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

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

---

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

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

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

月
储蓄

无法通过标准CSS完成，也无法可靠地跨浏览器完成。为此，您必须使用自定义标记（非表元素），或者使用javascript插件，例如。

好的，这需要一些时间才能正确完成，但我相信解决方案是可靠的。无论如何，我的测试没有破坏任何东西。最后，我不得不用嵌套的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>";

---

也许这不是最优雅的方法，但它现在起作用了。

我认为你不能像那样分开一张桌子。。。。桌子是有趣的东西。您可能需要将表头和表体拆分为单独的表，然后使用javasript匹配列宽度。我不确定，但我想这是我唯一担心的。这样做的一个小问题是，所有列单元格都链接到它们的列标题，并使用此信息将所选单元格、顶部标题和侧面标题信息发布到一个表单，该表单将根据所选内容执行查询。如果我把桌子分开，我会不会打破与上述信息的联系？我刚才试过这个建议。使用php和pear，您不需要像这样添加标记。它是这样完成的“$head=&$table->getHeader（）；”然后“$head->setHeaderContents（0，$i++，trim（$val））；”在for循环中。这是可以做到的，并且确实生成了thead标签，但是它会破坏单元格数据的链接。好的，我把thead标签放到文档中，并修复了单元格数据的链接。不幸的是，这会产生与我的代码相同的效果。行是固定的，全部显示，但标题列现在更小，不再对齐。谢谢你的建议，现在我相信它必须与@iainvdw的建议结合起来。我正试图利用你的建议，但它不起作用。它会重新格式化标题，但不会固定位置。现在标题列比表大。好的，它现在固定在适当的位置。现在的问题是，标题的列跨度为2，而现在它们没有跨度。关于如何解决这个问题有什么想法吗？