0

PHPとpear html_tableを使用して自動生成されたテーブルがあります。テーブルの上部に th 行があり、assetHeader のクラスがあります。テーブルの左側には、timeHeaders のクラスを含む 1 番目の列もあります。このテーブルは、列数が不定の 96 行で構成されています。上部のヘッダー列を修正して、ユーザーがテーブルをスクロールできるようにしようとしています (これは、セルが属するヘッダーが常に表示されるためです)。テーブルヘッダーを次のように修正するために、通常のcssトリックを試しました：

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

これを行うと、結果として、すべてのヘッダーが互いに積み重ねられ、最後のヘッダーのみがテーブルの左側に固定されます (実際の列幅よりも小さくなります)。次に、次のように、小さな jquery を使用して親テーブルの行にクラスを追加しようとしました。

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

対応する css は上記に似ており、これは機能しますが、th セルの書式設定が不適切です (セルはすべて表示され、所定の位置に固定されますが、すべて小さく、属する列と整列しなくなります)。私はここ数週間、この機能についてあちこちで取り組んできました。私は多くの異なるアプローチを試しましたが、最も実行可能と思われる 2 つだけを含めました。さらに、失敗したことをすべて思い出すことはできません。どんな助けでも大歓迎です！

4

3 に答える 3

0

このようにヘッダーをラップします - 必要に応じてクラスも追加します。

<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 に答える