[DIV+CSS] 2つ折り描画crosstab_html/css_WEB-ITnose

数年前にWeb上でクロス集計を生成する必要があったのですが、当時はまだCSS+Divが普及していなかったので、テーブル+テーブルではページ上がごちゃごちゃになってしまい、結局は までしか到達できませんでした。しかし、汎用性と可読性が低く、メンテナンスが容易ではないため、Css+Div レイアウトのトレンドに従って、クロスタブ (2 つ、3 つ...複数) を書き直しました。ここで整理します

次に、2 分割クロス集計について説明します
id="theadR" class="theadR">
Scrolldiv (); & gt;
& lt;/div & gt;

まず、scrollDiv メソッドについて説明します。コードは、主に、サーフェスがスクロールされるときのサーフェスとヘッダーを実現するためのものです。 .scrollLeft = document.getElementById('tbodyR').scrollLeft;

定義 構造が整ったら、CSS をカスタマイズします
まず、一番外側のテーブル margin-left:20px; のマージンを定義します。 :15px;
次に、内側の 4 ブロック
左上のヘッダーが最も単純ですが、高さは右側のテーブルのヘッダーの高さに対応し、幅はテーブルの側面の幅に対応します。外側の境界線については、必要に応じて追加されます
.table .theadL{top:0px;left:0px;width:300px;height:103px; background:Silver;border-top:solid 1px black;border-left:solid 1px black;}

右上のヘッダーは主にテーブル本体の縦線に合わせるため、列幅はすべてデッドに設定され、div は列内に設定されます。テーブル側の高さをテーブル本体の列の高さと同じに設定します

テーブル側部分のスタイルは単純で、次の内部 div の高さ、幅、および overflaw:hidden を設定するだけです。コンテンツは有益ではありません。 .table .tbodyL{top:103px;left:0px;width:300px;height:250px;border-bottom:solid 1px black;border-right:solid 1px black;} .table .theadR{上:0px ;左:299px;幅:500px;高さ:103px;ボーダートップ:黒 1 ピクセル;ボーダートップ:黒 1 ピクセル; }
.table .tbodyR{上:103ピクセル;左:300ピクセル;幅:517ピクセル;height: 267px;} x
効果は次のとおりです:

には、ほぼ処理済みのより複雑なクロス テーブルもあります。つまり、DIV+CSS レイアウトは、実際に多くの複雑な Web デザインの問題を単純化できます。