css - CSS: テーブルのヘッダーと最初の列を固定します。*ただし、特定の軸のみ*

Question

よくある質問のバリエーションがあり、できる限り説明しようと思います。あなたの側でいくつかの視覚化が必要になる場合があります。HTML テーブルがあります (実際には、テーブル内の div 内にテーブル内にテーブルがあります - 私は JSGantt プラグインを使用しています)。y 軸を下にスクロールするときだけテーブル ヘッダーを固定したいのですが、右にスクロールしてより多くのデータを表示する必要がある場合は、右にスクロールしたいと思います。

一方、下にスクロールすると (ヘッダー行はそのまま)、テーブルの最初の列も一緒に下にスクロールしたいと思います。しかし、右にスクロールするときは、最初の列をそのままにしておきます (ただし、前述のように、ヘッダー行も一緒にスクロールします)。したがって、基本的には、最初の列を x 軸のみに固定し、ヘッダー行のみを y 軸に固定しました。

とりあえずやめておきます。誰かがもっと明確にする必要がある場合は、私が説明しようとすることができます. 私はこれを複数の方法で試しましたが、本格的な Javascript がなければ不可能かもしれないと確信しています。ちなみに、テーブルは、設定されたディメンションを持つ外側の div 内に含まれているため、データをスクロールする必要があります。

あなたが提供できるどんな助けも大歓迎です。

Answer 1

このタイプのレイアウトは、途中で役立ちます。セルを一致させるために、セルのサイズの書式設定がたくさんあることに注意してください

<div id="TableHeaderDiv">
    <table id="TableHeader">
        <thead>
            <tr>
                <th style="width:100px"> Column1 </th>
                <th style="width:100px"> Column2 </th>
                <th style="width:100px"> Column3 </th>
            </tr>
        <thead>
    </table>
</div>
<div id "TableBodyMainDiv" style="overflow-y:auto">
  <div id="TableBodyLeftDiv" style="float:left">
     <table id="TableBody">
        <tbody>
            <tr>
                        <td style="width:100px"> Column2Value </td>
                <td style="width:100px"> Column3Value </td>
            </tr>
            <!-- More rows here -->
        <tbody>
    </table>

  </div>
  <div id="TableBodyDiv" style="float:left; overflow-x: auto">
    <table id="TableBody">
        <tbody>
            <tr>
                        <td style="width:100px"> Column2Value </td>
                <td style="width:100px"> Column3Value </td>
            </tr>
            <!-- More rows here -->
        <tbody>
    </table>
  </div>
</div>

おそらく、CSS クラスまたは Javascript を使用して tds の幅をスタイルしたいと思うでしょう。