純粋な 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 メソッドの違いを分析する

推薦する

MySQL 8.0.16 winx64 のインストールと設定方法のグラフィックチュートリアル (win10 の場合)

この記事では、MySQL 8.0.16 winx64のインストールと設定の具体的な方法を記載します。...

MySQLにおけるMTRの概念

MTR は Mini-Transaction の略です。名前が示すように、これは「最小のトランザクシ...

MySQLスレーブのメンテナンスに関する経験の共有

序文： MySQL マスター/スレーブ アーキテクチャは、最も一般的に使用されるアーキテクチャ セッ...

CSS の flex と inline-flex の違いの詳細な説明

inline-flex は inline-block と同じです。内部要素用の display:fl...

MySQL EXPLAIN出力列の詳細な説明

1. はじめにEXPLAIN ステートメントは、MySQL がステートメントを実行する方法に関する情...

Linux の EXT シリーズファイルシステムフォーマットの詳細な説明

Linux ファイルシステム一般的なハードディスクは上図のとおりです。各ディスクは複数のトラックに分...

JS で CSS 変数を使用する方法

JS で CSS 変数を使用する方法:export キーワードを使用して、js オブジェクトを le...

Vue プロジェクトでよく使用されるツール機能の概要

目次序文1. カスタムフォーカスコマンド1. 方法1 2. 方法2 3. 方法3 2. 入力ボックス...

VirtualBox6上のCentOS7で静的IPを設定する方法と注意点

VirtualBox をインストールした後、CentOS 7 をインストールします。ここでは詳細には...

MySQLデータ損失の原因と解決策

目次序文問題の説明原因分析拡大する総括する序文最近、データの欠落やデータの損失に関するフィードバック...

MySQL 5.7 MGR シングルマスター決定マスターノード方式の詳細説明

当銀行のMGRは年末に開始されます。公式文書を読んだり、毎日テストを受けたりしなければなりません。毎...

純粋な CSS3 で実装された三目並べゲーム

操作効果: html <div class="三目並べ"> <...

Alibaba Cloud で静的ウェブサイトを素早く構築する方法

序文：ジュニアプログラマーとして、私は自分自身の個人ウェブサイトを構築し、それを他の人に見せることを...

MySQL 高可用性ソリューション MMM (MySQL マルチマスター レプリケーション マネージャー)

1. MMMの紹介: MMM は、Multi-Master Replication Manager...

MySQL学習記録: KEYパーティションが引き起こした血なまぐさい事件

需要背景ビジネス テーブル tb_image のデータの一部は次のとおりです。id は一意ですが、i...