[DIV+CSS] 2つ折り描画crosstab_html/css_WEB-ITnose
Jun 24, 2016 pm 12:31 PM
数年前にWeb上でクロス集計を生成する必要があったのですが、当時はまだCSS+Divが普及していなかったので、テーブル+テーブルではページ上がごちゃごちゃになってしまい、結局は までしか到達できませんでした。しかし、汎用性と可読性が低く、メンテナンスが容易ではないため、Css+Div レイアウトのトレンドに従って、クロスタブ (2 つ、3 つ...複数) を書き直しました。ここで整理します
次に、2 分割クロス集計について説明します
id="theadR" class="theadR"></div>
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 デザインの問題を単純化できます。

人気の記事

人気の記事

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は?

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?

&lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか?

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか?
