6


やむを得ない理由 (多くのレガシー コード、互換性、設計の必要性) により、次の問題があります: 2 つのテーブルがあり、一方が他方の真下にありますが、2 つのフレームに分割されています (私の署名の下の疑似例を参照してください)。 . これら 2 つのテーブルが 1 つのように「動作」するように、これらのテーブルの列幅を正確に同期する必要があります。その理由は、スクロールできる「データ」テーブルの上にスクロールしない「ヘッダー」テーブルがあるためです。

現在、(まだ) 機能していない明らかな提案がいくつかあります。

まず、CSS を使用すると、テーブルのヘッダーではなく、テーブルの行だけにスクロールバーを配置する方法があると聞きました。これは、ここで意図した効果です。残念ながら、上記の理由により、これは実行可能なオプションではありません。

次に、列のパーセンテージ幅の書式設定です。残念ながら、スクロールバーはこれを混乱させます。この解決策は、次の可能な解決策であるピクセル幅の書式設定とも問題を共有しています。ここで、非常に幅の広い列コンテンツがある場合、これらの幅 (px または %) は 1 つのテーブルではオーバーライドされますが、他のテーブルではオーバーライドされません。どうやら CSS の「max-width」でこれを修正してもうまくいかないようです。

最終的に考えられる解決策は、ある種の Javascript と DOM を使用して問題を動的に強制することです。ここでは、各列に最小幅を強制し、下部幅を強制して上部幅をオーバーライドするだけで十分です。それでも、同じ列/行モデルを共有しながら、実際にテーブルを 2 つに分割する機能は非常に便利です。うまくいけば、このソリューションは実行可能であり、極端に複雑ではありません (RE Javascript/DOM の知識が不足していることをお許しください)。

ありがとう、

スコーレム

<!-- In frame 1 (top, non-scrolling): -->
<table id="t1" ...> (Just the header, really)
  <tr> 
    <td>Name</td><td>User Image</td><td>Email</td><td>Favorite Language</td>
  </tr>
</table>

<!-- In frame 2 (bottom, scrolling): -->
<!-- table "t2" intended to have equal column widths -->
<table id="t2" ...> (Data below the header)
  <tr>
   <!-- Lots of crazy stuff of wildly varying widths -->
   <td>...</td><td>...</td><td>...</td><td>...</td>
  </tr>
</table>
4

2 に答える 2

9

まず、t1 の幅を t2 の幅に設定します。次に、t1 からすべての td を取得し、その幅を t2 の列の幅と一致するように設定します。

この概念実証を試してみてください: http://jsfiddle.net/HqpGp/。

jQuery が必要で、それをフレームで動作するように変更しますが、それは良い出発点だと思います。ただし、JS の部分はより適切な方法で記述できると確信しています。

それが役に立てば幸い！

于 2010-08-27T01:42:28.897 に答える
2

受け入れられた回答を直接機能させることができなかったので、他の人にとって機能しない場合に備えて、少し作り直しました。

$('.table1 tr:eq(1) td').each(function (i) {
                var _this = $(this);
                $('.table2 tr:eq(1) td:eq(' + i + ')').width(_this.width());
            });
于 2015-02-03T00:07:04.870 に答える