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

推薦する

vue2.x の徹底研究 - h 関数の説明

目次解決、要約: vue プロジェクト。 .vue ファイルのテンプレート内に記述されたコードは、w...

MySQLが正常にインストールされたかどうかを確認する方法

MySQL をインストールした後、DOS ウィンドウまたは MySQL 5.7 コマンドライン クラ...

Docker Secretの管理と使用の詳細な説明

1. Docker Secretとは1. シナリオ表示MySQL サービスなど、一部のサービスではパ...

JavaScript配列の一般的なメソッドの例のまとめ

目次一般的な配列メソッドconcat() メソッドjoin() メソッドpop() メソッドpush...

lastInfdexOf 関数の MySQL 実装例

MySQL では lastIndexOf に似た関数を使用する必要がある場合もありますが、すぐに使用...

ウェブページ印刷細線表＋ページ印刷究極の戦略

最近、クライアントのために印刷していたとき、ページのヘッダーを印刷するのではなく、表の内容だけを印刷...

CentOS 7 で RPM パッケージを使用して MySQL 5.7.9 をインストールするチュートリアル

MySQL 5.7.9 のインストールチュートリアルを録画してみんなと共有しましょう環境の紹介:オペ...

サブクエリ最適化における MySQL 選択の実装

以下のデモはMySQLバージョン5.7.27に基づいています。 1. MySQLサブクエリ最適化戦略...

JS での Reduce() メソッドの使用の概要

目次1. 文法2. 例3. その他の関連方法長い間、reduce() メソッドの具体的な使い方を理解...

Linux で履歴コマンドを表示および実行する方法

履歴コマンドを表示し、指定されたコマンドを実行します owen@owen:~/owen/softwa...

Navicat for MySQL 11 登録コード\アクティベーションコードの概要

おすすめの読み物: Navicat12.1シリーズのクラッキングとアクティベーションのチュートリアル...

ウェブ理論: 考えさせない読書ノート

第 1 章<br /> Web ページをユーザーにとって使いやすいものにするための最も重...

docker pullがリセットされる問題を解決する

この記事では、docker pull がリセットされる問題を解決する方法を紹介し、皆さんと共有します...

HTMLはマーキーを使用してテキストを左右にスクロールします

コードをコピーコードは次のとおりです。 <本文> //マーキーの助けを借りて<MA...

HTML でフォーム コントロールを無効にする 2 つの方法: readonly と disabled

Web ページを作成する過程では、フォームがよく使用されます。しかし、フォーム上のコントロールを変更...