純粋な CSS ヘッダーの実装コードを修正

純粋な CSS ヘッダーの実装コードを修正

純粋な CSS で固定ヘッダーを実装するのが難しい主な理由は 2 つあります。まず、最大のシェアを持つ IE6 は position:fixed をサポートしていません。もう 1 つは、人々がこの効果をスプレッドシートで実現しようと懸命に努力していることです。しかし、外国人の中には、驚くほど多くの CSS ハックを使用して、純粋な CSS でこの効果を実際に実現している人もいます... コードが理解しにくく、拡張も難しい場合は、JavaScript を使用する方が良いと思います。今日はたまたまこのようなニーズに遭遇しました。別の視点から考えて、実際に解決できました。

CSS はプレゼンテーションを担当し、HTML は構造を担当することは周知の事実です。同じ構造でも、スタイルが異なれば、まったく異なる印象を与えることがあります。これは、人間の目が簡単に騙されることを示しています。そのため、DIV+CSS が熱心に推進されていた時代には、ページからテーブルを削除し、div+span を使用して「テーブル」を 1 つずつ作成したいという要望が常にありました。これはお勧めできませんが、テーブルで実行できることは、いくつかの組み合わせによって実行できることも示しています。言い換えれば、1 つのテーブルでできない場合は、2 つのテーブルを使用します。上の表は表のヘッダーをシミュレートし、下の表はスクロールバーのある部分をシミュレートします。先に進む前に、要件を明確にしましょう。そうでないと抽象的すぎてしまいます。まず、テーブルは 4*9 で、各列の幅は 170 ピクセル、合計は 680 ピクセル、スクロール バーは各ブラウザーでデフォルトで 16 ピクセルです。幅には境界線が含まれていないことに注意してください。4 つの列に 5 つの垂直境界線があり、合計幅は 701 ピクセルです。

<テーブル>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</テーブル>

次に、このテーブルを 2 つに分割します。最初のテーブルはヘッダーで、2 番目のテーブルにはスクロール バーが必要です。つまり、オーバーフロー スタイルを親要素に適用する必要があるため、div で囲む必要があります。この div は最初のテーブルと同じ長さにする必要があります。しかし、心配する必要はありません。外側に div を配置し、その幅を 701 ピクセルに設定し、これら 2 つの子要素の幅を 100% に設定するだけです。テーブルのレンダリングをより効率的にするために、 tbody をテーブルに明示的に追加することに注意してください。

<div id="スクロールテーブル">
  <テーブルクラス="thead">
    <t本文>
      <tr>
        <th>名前</th>
        <th>構文</th>
        <th>説明</th>
        <th>例</th>
      </tr>
    </tbody>
  </テーブル>
  <div>
    <テーブルクラス="tbody">
      <t本文>
        <tr>
          <td>シンプルな属性セレクター</td>
          <td>[属性] </td>
          <td>この属性を持つ要素を選択する</td>
          <td>blockquote[title] { <br/>color: red }</td>
        </tr>
        <tr>
          <td>属性値セレクター</td>
          <td>[attr="値"] </td>
          <td>属性値が指定された値と完全に等しい要素を選択します</td>
          <td>h2[align="left"] { <br/>カーソル: 手 } </td>
        </tr>
        <tr>
          <td>「Begins-with」属性値セレクター</td>
          <td>[attr^="値"] </td>
          <td>属性値が指定された値で始まる要素を選択します</td>
          <td>h2[align^="right"] { <br/>カーソル: 手 } </td>
        </tr>
        <tr>
          <td>「Ends-with」属性値セレクター</td>
          <td>[attr$="値"] </td>
          <td>属性値が指定された値で終わる要素を選択します</td>
          <td>div[class$="vml"]{<br/>カーソル: 手} </td>
        </tr>
        <tr>
          <td>部分文字列一致属性値セレクター</td>
          <td>[attr*="値"] </td>
          <td>属性値に指定された値が含まれる要素を選択します</td>
          <td>div[class*="grid"]{<br/> float:left} </td>
        </tr>
        <tr>
          <td>1 対多の属性値セレクター</td>
          <td>[attr~="値"] </td>
          <td>元の要素の属性値は複数の単語であり、指定された値はそのうちの 1 つです。 </td>
          <td>li[class~="last"]{<br/> padding-left:2em} </td>
        </tr>
        <tr>
          <td>ハイフン属性値セレクター</td>
          <td>[属性|="値"] </td>
          <td>元の要素の属性値は指定された値と等しいか、指定された値に「-」を加えた値で始まります</td>
          <td>span[lang|="en"]{ <br/>color:green}</td>
        </tr>
        <tr>
          <td>属性値セレクターを反転</td>
          <td>[attr!="値"] </td>
          <td>非標準、jQuery に出現</td>
          <td>span[class!="red"]{<br/>color:green}</td>
        </tr>
      </tbody>
    </テーブル>
  </div>
</div>

プレゼンテーション層:

#スクロールテーブル{
  幅:701ピクセル;
  border: 1px solid #EB8;/*テーブルには外側の境界線はなく、内部の td または th にのみ境界線があります*/
  背景: #FF8C00;
}
 
 
#スクロールテーブルテーブル{
  border-collapse:collapse; /*2つのテーブルを細線テーブルに設定する*/
}
 
#scrollTable table.thead{ /*テーブルヘッダー*/
  /*divの最初の子要素*/
  幅:100%;
}
 
#scrollTable table.thead th{/*テーブル ヘッダー*/
  境界線: 1px 実線 #EB8;
  右ボーダー:#C96;
  色:#fff;
  背景: #FF8C00;/*明るいオレンジ*/
}
 
#scrollTable div{/*スクロールバー付きのテーブル本体*/
  /*divの2番目の子要素*/
  幅:100%;
  高さ:200px;
  overflow:auto;/*必須*/
}
 
#scrollTable table.tbody{/*スクロールバー付きの表の本体*/
  幅:100%;
  境界線: 1px 実線 #C96;
  右ボーダー:#B74;
  色:#666666;
  背景: #ECE9D8;
}
#scrollTable table.tbody td{/*スクロールバー付きのテーブル本体のグリッド*/
  境界線:1px 実線 #C96;
}

コードを実行します:

<!doctypehtml>
<html dir="ltr" lang="zh-CN">
  <ヘッド>
    <メタ文字セット="utf-8"/>
    <title>固定ヘッダーを実現するための純粋な CSS</title>
    <スタイル タイプ="text/css">

      #スクロールテーブル{
        幅:701ピクセル;
        border: 1px solid #EB8;/*テーブルには外側の境界線はなく、内部の td または th にのみ境界線があります*/
        背景: #FF8C00;
      }


      #スクロールテーブルテーブル{
        border-collapse:collapse; /*2つのテーブルを細線テーブルに設定する*/
      }

      #scrollTable table.thead{ /*テーブルヘッダー*/
        /*divの最初の子要素*/
        幅:100%;
      }

      #scrollTable table.thead th{/*テーブル ヘッダー*/
        境界線: 1px 実線 #EB8;
        右ボーダー:#C96;
        色:#fff;
        背景: #FF8C00;/*明るいオレンジ*/
      }

      #scrollTable div{/*スクロールバー付きのテーブル本体*/
        /*divの2番目の子要素*/
        幅:100%;
        高さ:200px;
        overflow:auto;/*必須*/
      }

      #scrollTable table.tbody{/*スクロールバー付きの表の本体*/
        幅:100%;
        境界線: 1px 実線 #C96;
        右ボーダー:#B74;
        色:#666666;
        背景: #ECE9D8;
      }
      #scrollTable table.tbody td{/*スクロールバー付きのテーブル本体のグリッド*/
        境界線:1px 実線 #C96;
      }

    </スタイル>
  </head>
  <本文>
    <div id="スクロールテーブル">
      <テーブルクラス="thead">
      
        <t本文>
          <tr>
            <th>名前</th>
            <th>構文</th>
            <th>説明</th>
            <th>例</th>
          </tr>
        </tbody>
      </テーブル>
      <div>
        <テーブルクラス="tbody">
       
          <t本文>
            <tr>
              <td>シンプルな属性セレクター</td>
              <td>[属性] </td>
              <td>この属性を持つ要素を選択する</td>
              <td>blockquote[title] { <br/>color: red }</td>
            </tr>
            <tr>
              <td>属性値セレクター</td>
              <td>[attr="値"] </td>
              <td>属性値が指定された値と完全に等しい要素を選択します</td>
              <td>h2[align="left"] { <br/>カーソル: 手 } </td>
            </tr>
            <tr>
              <td>「Begins-with」属性値セレクター</td>
              <td>[attr^="値"] </td>
              <td>属性値が指定された値で始まる要素を選択します</td>
              <td>h2[align^="right"] { <br/>カーソル: 手 } </td>
            </tr>
            <tr>
              <td>「Ends-with」属性値セレクター</td>
              <td>[attr$="値"] </td>
              <td>属性値が指定された値で終わる要素を選択します</td>
              <td>div[class$="vml"]{<br/>カーソル: 手} </td>
            </tr>
            <tr>
              <td>部分文字列一致属性値セレクター</td>
              <td>[attr*="値"] </td>
              <td>属性値に指定された値が含まれる要素を選択します</td>
              <td>div[class*="grid"]{<br/> float:left} </td>
            </tr>
            <tr>
              <td>1 対多の属性値セレクター</td>
              <td>[attr~="値"] </td>
              <td>元の要素の属性値は複数の単語であり、指定された値はそのうちの 1 つです。 </td>
              <td>li[class~="last"]{<br/> padding-left:2em} </td>
            </tr>
            <tr>
              <td>ハイフン属性値セレクター</td>
              <td>[属性|="値"] </td>
              <td>元の要素の属性値は指定された値と等しいか、指定された値に「-」を加えた値で始まります</td>
              <td>span[lang|="en"]{ <br/>color:green}</td>
            </tr>
            <tr>
              <td>属性値セレクターを反転</td>
              <td>[attr!="値"] </td>
              <td>非標準、jQuery に出現</td>
              <td>span[class!="red"]{<br/>color:green}</td>
            </tr>
          </tbody>
        </テーブル>
      </div>
    </div>


  </本文>
</html>

時計のヘッドのグリッドが時計本体のグリッドと一致していないことが判明しました。このとき、col タグを使用する必要があります。col を使用すると、tbody 内の同じインデックス値を持つ td または th の背景色、テキストの配置、幅を均一に設定できます。 CSS2.1 の隣接セレクターと CSS3 の子要素フィルタリング疑似クラスを使用すると、より合理的な方法で設定し、スタイルと構造を分離できますが、IE ファミリーが常に遅れをとっているのは残念です。もう一度、長さを見てみましょう。最後のテーブルはスクロール バーによって短くなる可能性があるため、最初の 3 つの列の長さが同じになるようにし、残りを最後の列に割り当てる必要があります。つまり、最後の列を設定する必要はありません。また、IEではスクロールバーのスタイルも設定できます。試してみましょう。

<テーブルクラス="thead">
        <col width="170px"></col> <col width="170px"></col> <col width="170px"></col> <col width="170px"></col>
        <t本文>
//********************わずかに*****************
        </tbody>
 </テーブル>
 <div>
      <テーブルクラス="tbody">
          <col width="170px"></col> <col width="170px"></col> <col width="170px"></col> <col width="170px"></col>
          <t本文>
//********************わずかに*****************    
          </tbody>
      </テーブル>
 </div>

プレゼンテーション層:

#スクロールテーブル{
  幅:701ピクセル;
  border: 1px solid #EB8;/*テーブルには外側の境界線はなく、内部の td または th にのみ境界線があります*/
  背景: #FF8C00;
}
 
#スクロールテーブルテーブル{
  border-collapse:collapse; /*2つのテーブルを細線テーブルに設定する*/
}
/*ヘッダー div の最初の子要素**/
#スクロールテーブルテーブル.thead{ 
  幅:100%;
}
/*ヘッダ*/
#scrollTable テーブル.thead th{
  境界線: 1px 実線 #EB8;
  右ボーダー:#C96;
  色:#fff;
  背景: #FF8C00;/*明るいオレンジ*/
}
/*スクロールバー付きのテーブル本体*/
/*divの2番目の子要素*/
#スクロールテーブル div{
  幅:100%;
  高さ:200px;
  overflow:auto;/*必須*/
  scrollbar-face-color:#EB8;/*3つの小さな長方形の背景色*/
  scrollbar-base-color:#ece9d8;/*3つの小さな長方形の前景色*/
  scrollbar-arrow-color:#FF8C00;/*上下ボタンの三角形の矢印の色*/
  scrollbar-track-color:#ece9d8;/*スクロールバーのアクティブブロックが配置されている四角形の背景色*/
  scrollbar-highlight-color:#800040;/*3つの小さな長方形の左上の余白の色*/
  scrollbar-shadow-color:#800040;/*3つの小さな長方形の右下の余白の色*/
  scrollbar-3dlight-color: #EB8;/*3つの小さな長方形の左上の境界線の色*/
  scrollbar-darkshadow-Color:#EB8;/*3つの小さな長方形の右下の境界線の色*/
}
/*スクロールバー付きの時計本体*/
#スクロールテーブルテーブル.tbody{
  幅:100%;
  境界線: 1px 実線 #C96;
  右ボーダー:#B74;
  色:#666666;
  背景: #ECE9D8;
}
/*スクロールバー付きグリッド*/
#スクロールテーブルテーブル.tbodytd{
  境界線:1px 実線 #C96;
}

コードを実行します:

<!doctypehtml>
<html dir="ltr" lang="zh-CN">
  <ヘッド>
    <メタ文字セット="utf-8"/>
    <title>固定ヘッダーを実現するための純粋な CSS</title>
    <スタイル タイプ="text/css">

      #スクロールテーブル{
        幅:701ピクセル;
        border: 1px solid #EB8;/*テーブルには外側の境界線はなく、内側の td または th にのみ境界線があります*/
        背景: #FF8C00;
      }

      #スクロールテーブルテーブル{
        border-collapse:collapse; /*2つのテーブルを細線テーブルに設定する*/
      }
      /*ヘッダー div の最初の子要素**/
      #スクロールテーブルテーブル.thead{ 
        幅:100%;
      }
      /*ヘッダ*/
      #scrollTable テーブル.thead th{
        境界線: 1px 実線 #EB8;
        右ボーダー:#C96;
        色:#fff;
        背景: #FF8C00;/*明るいオレンジ*/
      }
      /*スクロールバー付きのテーブル本体*/
      /*divの2番目の子要素*/
      #スクロールテーブル div{
        幅:100%;
        高さ:200px;
        overflow:auto;/*必須*/
        scrollbar-face-color:#EB8;/*3つの小さな長方形の背景色*/
        scrollbar-base-color:#ece9d8;/*3つの小さな長方形の前景色*/
        scrollbar-arrow-color:#FF8C00;/*上下ボタンの三角形の矢印の色*/
        scrollbar-track-color:#ece9d8;/*スクロールバーのアクティブブロックが配置されている四角形の背景色*/
        scrollbar-highlight-color:#800040;/*3つの小さな長方形の左上の余白の色*/
        scrollbar-shadow-color:#800040;/*3つの小さな長方形の右下の余白の色*/
        scrollbar-3dlight-color: #EB8;/*3つの小さな長方形の左上の境界線の色*/
        scrollbar-darkshadow-Color:#EB8;/*3つの小さな長方形の右下の境界線の色*/
      }
      /*スクロールバー付きの時計本体*/
      #スクロールテーブルテーブル.tbody{
        幅:100%;
        境界線: 1px 実線 #C96;
        右ボーダー:#B74;
        色:#666666;
        背景: #ECE9D8;
      }
      /*スクロールバー付きグリッド*/
      #スクロールテーブルテーブル.tbodytd{
        境界線:1px 実線 #C96;
      }

    </スタイル>
  </head>
  <本文>
    <div id="スクロールテーブル">
      <テーブルクラス="thead">
        <col width="170px"></col> <col width="170px"></col> <col width="170px"></col> <col width="170px"></col>
        <t本文>
          <tr>
            <th>名前</th>
            <th>構文</th>
            <th>説明</th>
            <th>例</th>
          </tr>
        </tbody>
      </テーブル>
      <div>
        <テーブルクラス="tbody">
          <col width="170px"></col> <col width="170px"></col> <col width="170px"></col> <col width="170px"></col>
          <t本文>
            <tr>
              <td>シンプルな属性セレクター</td>
              <td>[属性] </td>
              <td>この属性を持つ要素を選択する</td>
              <td>blockquote[title] { <br/>color: red }</td>
            </tr>
            <tr>
              <td>属性値セレクター</td>
              <td>[attr="値"] </td>
              <td>属性値が指定された値と完全に等しい要素を選択します</td>
              <td>h2[align="left"] { <br/>カーソル: 手 } </td>
            </tr>
            <tr>
              <td>「Begins-with」属性値セレクター</td>
              <td>[attr^="値"] </td>
              <td>属性値が指定された値で始まる要素を選択します</td>
              <td>h2[align^="right"] { <br/>カーソル: 手 } </td>
            </tr>
            <tr>
              <td>「Ends-with」属性値セレクター</td>
              <td>[attr$="値"] </td>
              <td>属性値が指定された値で終わる要素を選択します</td>
              <td>div[class$="vml"]{<br/>カーソル: 手} </td>
            </tr>
            <tr>
              <td>部分文字列一致属性値セレクター</td>
              <td>[attr*="値"] </td>
              <td>属性値に指定された値が含まれる要素を選択します</td>
              <td>div[class*="grid"]{<br/> float:left} </td>
            </tr>
            <tr>
              <td>1 対多の属性値セレクター</td>
              <td>[attr~="値"] </td>
              <td>元の要素の属性値は複数の単語であり、指定された値はそのうちの 1 つです。 </td>
              <td>li[class~="last"]{<br/> padding-left:2em} </td>
            </tr>
            <tr>
              <td>ハイフン属性値セレクター</td>
              <td>[属性|="値"] </td>
              <td>元の要素の属性値は指定された値と等しいか、指定された値に「-」を加えた値で始まります</td>
              <td>span[lang|="en"]{ <br/>color:green}</td>
            </tr>
            <tr>
              <td>属性値セレクターを反転</td>
              <td>[attr!="値"] </td>
              <td>非標準、jQuery に出現</td>
              <td>span[class!="red"]{<br/>color:green}</td>
            </tr>
          </tbody>
        </テーブル>
      </div>
    </div>

  </本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  MySQL で lower_case_table_names を記録する際の落とし穴の詳細な説明

>>:  JavaScript の querySelector メソッドと getElementById メソッドの違いを分析する

推薦する

CSS子要素選択親要素の実装

通常、CSS セレクターは上から下に選択し、親要素を介して子要素を選択します。では、子要素を介して親...

Vueのデータ応答性原則の詳細な説明

この記事は主に、Vue のレスポンシブ ソース コードを理解していない、または触れたことがない人向け...

ミニプログラムは左スライドのドロワーメニューをネイティブに実装します

目次WXS レスポンス イベントプランAページ構造とスタイルWXS イベントコールバック関数WXS ...

プライベートイメージウェアハウスを構築するためのDockerレジストリの実装方法

マイクロサービスのイメージは、保存用に Docker リポジトリにアップロードされます。一般的に使用...

ES6の新機能に関する最もよく使われる知識ポイントのまとめ

目次1. キーワード2. 脱構築3. 文字列4. 正規化5. 配列6. 機能7. オブジェクト8.シ...

js ドラッグ アンド ドロップ テーブルでコンテンツ計算を実現する

この記事の例では、コンテンツの計算を実現するためのjsドラッグアンドドロップテーブルの具体的なコード...

MySQL の従来のソート、カスタム ソート、中国語のピンイン文字によるソート

MySQL の通常のソート、カスタム ソート、中国語のピンイン文字によるソート。実際の SQL を記...

Vueでシングルサインオンを実装する方法のまとめ

最近プロジェクトが中断され、RageFrame の研究は一時的に終了しました。この記事では、シングル...

Vue3 親子コンポーネントパラメータ転送における sync 修飾子の使用法の詳細な説明

目次一方向データフローの説明Vue2.x の使用法親コンポーネントに変更を通知するイベントのフォーム...

さまざまな種類のMySQLインデックス

インデックスとは何ですか?インデックスは、データベース ストレージ エンジンが指定されたデータをすば...

CentOS 7 はネットワークカードを変更した後、インターネットにアクセスできません

不明なドメイン名 www.baidu.com を Ping するホストのIPアドレスを変更する右クリ...

ホバープロンプトにはvue2+elementuiを使用する

Vue2+elementui のホバー プロンプトは、外部と内部に分かれています。内部のものは el...

開発効率の向上に役立つ 56 個の実用的な JavaScript ツール関数

目次1. デジタルオペレーション（１）指定された範囲内で乱数を生成する2. 配列操作（１）配列の順序...

JavaScript の遅延読み込み属性パターンを理解する

従来、開発者はインスタンスで必要になる可能性のあるデータに対して JavaScript クラス内にプ...

Docker実践: Pythonアプリケーションのコンテナ化

1. はじめにコンテナはサンドボックス メカニズムを使用して相互に分離します。コンテナ内にデプロイさ...