ホームページ ウェブフロントエンド htmlチュートリアル [DIV+CSS] 2つ折り描画crosstab_html/css_WEB-ITnose

[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 デザインの問題を単純化できます。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

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

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

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

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

&lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? &lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

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

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

WebページのPNG画像にストローク効果を効率的に追加する方法は?

&lt; meter&gt;の目的は何ですか 要素? &lt; meter&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

&lt; meter&gt;の目的は何ですか 要素?

&lt; datalist&gt;の目的は何ですか 要素? &lt; datalist&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

&lt; datalist&gt;の目的は何ですか 要素?

&lt; Progress&gt;の目的は何ですか 要素? &lt; Progress&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

&lt; Progress&gt;の目的は何ですか 要素?

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

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

See all articles