0

I have a table that is auto generated using php and pear html_table. The table has a th row across the top and they have a class of assetHeader. The table also has a th column down the left side with a class of timeHeaders. The table consists of 96 rows by an indeterminate number of columns. I am attempting to fix the top header columns and allow the user to scroll the table (this was they always see the header the cells belong to). I have tried the normal css tricks to fix the table headers in place like this:

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

When I do this, the result is that all the headers are stacked on top of each other and only the last one is fixed to the left side of the table (and it is smaller than the actual column width). I then attempted a little jquery to add a class to the parent table row, like this:

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

The corresponding css is similar to the above, and this works but with improper formatting of the th cells (they are all displayed and fixed into place, but are all small and no longer line up with the columns they belong to). I have been working here and there on this feature for a couple of weeks now. I have tried many different approaches and have only included the two that seem most viable. Plus I cannot remember everything I've tried that has failed. Any and all help would be greatly appreciated!

4

3 回答 3

0

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

于 2013-09-25T15:26:07.217 回答
0

像这样包装标题 - 如果您愿意，也可以添加一个类 Thead 标签在HTML中的使用如下所示

<thead>
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
</thead>
于 2013-09-25T15:22:22.817 回答
0

好的，花了一点时间来解决这个问题，但我相信解决方案是可靠的。无论如何，我的测试并没有破坏任何东西。我最终不得不将我的标题包装在嵌套的 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;
}

也许不是最优雅的方法，但它现在可以完成工作。

于 2013-10-04T13:14:47.537 回答