検索
ホームページウェブフロントエンドCSSチュートリアル純粋なCSSでテーブルヘッダーを修正するにはどうすればよいですか?テーブルヘッダ固定の実装

純粋なCSSでテーブルヘッダーを修正するにはどうすればよいですか?テーブルヘッダ固定の実装

青灯夜游
青灯夜游
Nov 10, 2018 pm 05:38 PM
css

この記事の内容は、純粋な CSS でテーブルヘッダーの固定を実現する方法を紹介することです。ヘッダー固定の実装。困っている友人は参考にしていただければ幸いです。

純粋な CSS でテーブル ヘッダーの固定を実現することが難しい理由は、主に次の 2 点によるものです。

1. 最大のシェアを誇る IE6 は、position:fixed をサポートしていません。 。

2. 人々はテーブルでこの効果を実現したいと考えています。

しかし、海外の人々は、驚くべき数の CSS ハックを使用して、純粋な CSS を使用してこの効果を実際に実現しています...コードが非常に理解しにくく、拡張するのが難しい場合は、次のようにした方がよいと思います。 JavaScriptを使用します。たまたま今日、私もそういうニーズに遭遇したのですが、視点を変えて考えてみると、なるほどと思いました。

CSS はパフォーマンスを担当し、HTML は構造を担当することがわかっています。同じ構造でもスタイルを変えると、まったく異なる印象を与えることがわかります。これは、人間の目は簡単に騙されることを示しています。したがって、p CSS が熱心に提唱された時代には、人々は常にページからテーブルを削除することを望み、p スパンを使用して「テーブル」を 1 つずつ作成していました。

この種のことはお勧めできませんが、テーブルで実行できることは、いくつかの組み合わせによって実行できることも示しています。逆に言うと、1台では無理なので2台で。

上の表はヘッダーをシミュレートし、下の表はスクロール バーのある部分をシミュレートします。次に進む前に、抽象的になりすぎずに、まずニーズを明確にしましょう。まず、テーブルは 4*9 で、各列の幅は 170 ピクセル、合計は 680 ピクセルです。幅には境界線が含まれていないことを忘れないでください。横の合計の長さは 701px です。 



  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
    
    
    
    
    
    
    
    
    




次に、このテーブルを 2 つに分割します。最初のテーブルはヘッダーで、2 番目のテーブルにはスクロール バーが必要です。これは、オーバーフロー スタイルを親要素に適用する必要があることを意味します。 pでコーティングされます。この p と最初のテーブルは同じ長さでなければなりません。 


しかし、心配しないでください。それらの外側に p を置き、幅を 701px に設定し、これら 2 つのサブ要素の幅を 100% に設定します。テーブルのレンダリング効率を向上させるために、テーブルに tbody を明示的に追加していることに注意してください。 


<p>
  </p>


    
      
        
        
        
        
      
    
  
名称语法说明例子

  

    


      
        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
          
        
      
    
Simple attribute Selector[attr] 选择具有此属性的元素blockquote[title] { 
color: red }
attribute Value Selector[attr="value"] 选出属性值精确等于给出值的元素h2[align="left"] { 
cursor: hand } 
"Begins-with" attribute Value Selector[attr^="value"] 选出属性值以给出值开头的元素h2[align^="right"] { 
cursor: hand } 
"Ends-with" attribute Value Selector[attr$="value"] 选出属性值以给出值结尾的元素p[class$="vml"]{
cursor: hand} 
Substring-match attribute Value Selector[attr*="value"] 选出属性值包含给出值的元素p[class*="grid"]{
 float:left} 
One-Of-Many Attribute Value Selector[attr~="value"] 原元素的属性值为多个单词，给出值为其中一个。li[class~="last"]{
 padding-left:2em} 
Hyphen Attribute Value Selector[attr|="value"] 原元素的属性值等于给出值，或者以给出值加“-”开头span[lang|="en"]{ 
color:green}
反选属性值选择器[attr!="value"] 非标准，jQuery中出现的span[class!="red"]{
color:green}

  

プレゼンテーション層部分: 


#scrollTable {
  width:701px;
  border: 1px solid #EB8;/*table没有外围的border，只有内部的td或th有border*/
  background: #FF8C00;
}
 
 
#scrollTable table {
  border-collapse:collapse; /*统一设置两个table为细线表格*/
}
 
#scrollTable table.thead{ /*表头*/
  /*p的第一个子元素*/
  width:100%;
}
 
#scrollTable table.thead th{/*表头*/
  border: 1px solid #EB8;
  border-right:#C96;
  color:#fff;
  background: #FF8C00;/*亮桔黄色*/
}
 
#scrollTable p{/*能带滚动条的表身*/
  /*p的第二个子元素*/
  width:100%;
  height:200px;
  overflow:auto;/*必需*/
}
 
#scrollTable table.tbody{/*能带滚动条的表身的正体*/
  width:100%;
  border: 1px solid #C96;
  border-right:#B74;
  color:#666666;
  background: #ECE9D8;
}
#scrollTable table.tbody td{/*能带滚动条的表身的格子*/
  border:1px solid #C96;
}


実行コード: 


nbsp;html>

  
    <meta>
    <title>纯CSS实现表头固定</title>
    <style>

      #scrollTable {
        width:701px;
        border: 1px solid #EB8;/*table没有外围的border，只有内部的td或th有border*/
        background: #FF8C00;
      }


      #scrollTable table {
        border-collapse:collapse; /*统一设置两个table为细线表格*/
      }

      #scrollTable table.thead{ /*表头*/
        /*p的第一个子元素*/
        width:100%;
      }

      #scrollTable table.thead th{/*表头*/
        border: 1px solid #EB8;
        border-right:#C96;
        color:#fff;
        background: #FF8C00;/*亮桔黄色*/
      }

      #scrollTable p{/*能带滚动条的表身*/
        /*p的第二个子元素*/
        width:100%;
        height:200px;
        overflow:auto;/*必需*/
      }

      #scrollTable table.tbody{/*能带滚动条的表身的正体*/
        width:100%;
        border: 1px solid #C96;
        border-right:#B74;
        color:#666666;
        background: #ECE9D8;
      }
      #scrollTable table.tbody td{/*能带滚动条的表身的格子*/
        border:1px solid #C96;
      }

    </style>
  
  
    <p>
      </p>


      
        
          
            
            
            
            
          
        
      
名称语法说明例子

      

        


       
          
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
          
        
Simple attribute Selector[attr] 选择具有此属性的元素blockquote[title] { 
color: red }
attribute Value Selector[attr="value"] 选出属性值精确等于给出值的元素h2[align="left"] { 
cursor: hand } 
"Begins-with" attribute Value Selector[attr^="value"] 选出属性值以给出值开头的元素h2[align^="right"] { 
cursor: hand } 
"Ends-with" attribute Value Selector[attr$="value"] 选出属性值以给出值结尾的元素p[class$="vml"]{
cursor: hand} 
Substring-match attribute Value Selector[attr*="value"] 选出属性值包含给出值的元素p[class*="grid"]{
 float:left} 
One-Of-Many Attribute Value Selector[attr~="value"] 原元素的属性值为多个单词，给出值为其中一个。li[class~="last"]{
 padding-left:2em} 
Hyphen Attribute Value Selector[attr|="value"] 原元素的属性值等于给出值，或者以给出值加“-”开头span[lang|="en"]{ 
color:green}
反选属性值选择器[attr!="value"] 非标准，jQuery中出现的span[class!="red"]{
color:green}

      
    


  



 header 本文のグリッドが整列していません。このとき、col タグを使用する必要があります。col を使用すると、tbody の同じインデックス値で背景色、テキストの配置、td または th の幅を均一に設定できます。 CSS2.1 の隣接セレクターと CSS3 のサブ要素フィルタリング擬似クラスを使用すると、より合理的な方法でそれらを設定でき、スタイルと構造が分離されていますが、IE ファミリが常に後れを取っているのは残念です。最後のテーブルはスクロール バーによって押しつぶされて長さが短くなっている可能性があるため、最初の 3 つの列の長さが等しく、残りが最後のテーブルに割り当てられるようにするだけで済みます。つまり、最後のものは設定する必要はありません。さらに、IE ではスクロール バーのスタイルを設定できるので、いろいろ試してみましょう。 




                  
//********************略*****************
        
 




 

      


                      
//********************略*****************    
          
      




 
プレゼンテーション層部分: 


#scrollTable {
  width:701px;
  border: 1px solid #EB8;/*table没有外围的border，只有内部的td或th有border*/
  background: #FF8C00;
}
 
#scrollTable table {
  border-collapse:collapse; /*统一设置两个table为细线表格*/
}
/*表头 p的第一个子元素**/
#scrollTable table.thead{ 
  width:100%;
}
/*表头*/
#scrollTable table.thead th{
  border: 1px solid #EB8;
  border-right:#C96;
  color:#fff;
  background: #FF8C00;/*亮桔黄色*/
}
/*能带滚动条的表身*/
/*p的第二个子元素*/
#scrollTable p{
  width:100%;
  height:200px;
  overflow:auto;/*必需*/
  scrollbar-face-color:#EB8;/*那三个小矩形的背景色*/
  scrollbar-base-color:#ece9d8;/*那三个小矩形的前景色*/
  scrollbar-arrow-color:#FF8C00;/*上下按钮里三角箭头的颜色*/
  scrollbar-track-color:#ece9d8;/*滚动条的那个活动块所在的矩形的背景色*/
  scrollbar-highlight-color:#800040;/*那三个小矩形左上padding的颜色*/
  scrollbar-shadow-color:#800040;/*那三个小矩形右下padding的颜色*/
  scrollbar-3dlight-color: #EB8;/*那三个小矩形左上border的颜色*/
  scrollbar-darkshadow-Color:#EB8;/*那三个小矩形右下border的颜色*/
}
/*能带滚动条的表身的正体*/
#scrollTable table.tbody{
  width:100%;
  border: 1px solid #C96;
  border-right:#B74;
  color:#666666;
  background: #ECE9D8;
}
/*能带滚动条的表身的格子*/
#scrollTable table.tbody td{
  border:1px solid #C96;
}


実行コード: 


nbsp;html>

  
    <meta>
    <title>纯CSS实现表头固定 </title>
    <style>

      #scrollTable {
        width:701px;
        border: 1px solid #EB8;/*table没有外围的border，只有内部的td或th有border*/
        background: #FF8C00;
      }

      #scrollTable table {
        border-collapse:collapse; /*统一设置两个table为细线表格*/
      }
      /*表头 p的第一个子元素**/
      #scrollTable table.thead{ 
        width:100%;
      }
      /*表头*/
      #scrollTable table.thead th{
        border: 1px solid #EB8;
        border-right:#C96;
        color:#fff;
        background: #FF8C00;/*亮桔黄色*/
      }
      /*能带滚动条的表身*/
      /*p的第二个子元素*/
      #scrollTable p{
        width:100%;
        height:200px;
        overflow:auto;/*必需*/
        scrollbar-face-color:#EB8;/*那三个小矩形的背景色*/
        scrollbar-base-color:#ece9d8;/*那三个小矩形的前景色*/
        scrollbar-arrow-color:#FF8C00;/*上下按钮里三角箭头的颜色*/
        scrollbar-track-color:#ece9d8;/*滚动条的那个活动块所在的矩形的背景色*/
        scrollbar-highlight-color:#800040;/*那三个小矩形左上padding的颜色*/
        scrollbar-shadow-color:#800040;/*那三个小矩形右下padding的颜色*/
        scrollbar-3dlight-color: #EB8;/*那三个小矩形左上border的颜色*/
        scrollbar-darkshadow-Color:#EB8;/*那三个小矩形右下border的颜色*/
      }
      /*能带滚动条的表身的正体*/
      #scrollTable table.tbody{
        width:100%;
        border: 1px solid #C96;
        border-right:#B74;
        color:#666666;
        background: #ECE9D8;
      }
      /*能带滚动条的表身的格子*/
      #scrollTable table.tbody td{
        border:1px solid #C96;
      }

    </style>
  
  
    <p>
      </p>


                  
          
            
            
            
            
          
        
      



名称语法说明例子

      

        


                      
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
          
        



Simple attribute Selector[attr] 选择具有此属性的元素blockquote[title] { 
color: red }
attribute Value Selector[attr="value"] 选出属性值精确等于给出值的元素h2[align="left"] { 
cursor: hand } 
"Begins-with" attribute Value Selector[attr^="value"] 选出属性值以给出值开头的元素h2[align^="right"] { 
cursor: hand } 
"Ends-with" attribute Value Selector[attr$="value"] 选出属性值以给出值结尾的元素p[class$="vml"]{
cursor: hand} 
Substring-match attribute Value Selector[attr*="value"] 选出属性值包含给出值的元素p[class*="grid"]{
 float:left} 
One-Of-Many Attribute Value Selector[attr~="value"] 原元素的属性值为多个单词，给出值为其中一个。li[class~="last"]{
 padding-left:2em} 
Hyphen Attribute Value Selector[attr|="value"] 原元素的属性值等于给出值，或者以给出值加“-”开头span[lang|="en"]{ 
color:green}
反选属性值选择器[attr!="value"] 非标准，jQuery中出现的span[class!="red"]{
color:green}

      
    

  

純粋なCSSでテーブルヘッダーを修正するにはどうすればよいですか?テーブルヘッダ固定の実装



以上が純粋なCSSでテーブルヘッダーを修正するにはどうすればよいですか?テーブルヘッダ固定の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明
この記事はsegmentfault 思否で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
関連記事
毎週のプラットフォームニュース：Galaxy Store、Tappable Stories、CSS SubgridのWebアプリ毎週のプラットフォームニュース：Galaxy Store、Tappable Stories、CSS SubgridのWebアプリApr 14, 2025 am	 11:20 AM
今週のラウンドアップ：Firefoxは錠前屋のような力を獲得し、Samsung＆＃039; s Galaxy StoreがプログレッシブWebアプリをサポートし始め、CSS SubgridはFirefoxで出荷しています
毎週のプラットフォームニュース：インターネットエクスプローラーモード、検索コンソールの速度レポート、通知プロンプトの制限毎週のプラットフォームニュース：インターネットエクスプローラーモード、検索コンソールの速度レポート、通知プロンプトの制限Apr 14, 2025 am	 11:15 AM
今週のラウンドアップ：Internet ExplorerがEdgeに進み、Google Search Consoleが新しい速度レポートを宣伝し、FirefoxがFacebookの通知を提供します
CSSカスタムプロパティを使用したスコープのパワー（および楽しい）CSSカスタムプロパティを使用したスコープのパワー（および楽しい）Apr 14, 2025 am	 11:11 AM
おそらく、CSS変数に少なくとも少し精通しているでしょう。そうでない場合は、ここに2秒の概要があります：それらは本当にカスタムプロパティと呼ばれます、あなたは設定します
私たちはプログラマーです私たちはプログラマーですApr 14, 2025 am	 11:04 AM
建物のウェブサイトはプログラミングです。 HTMLとCSSの作成はプログラミングです。私はプログラマーです。ここでCSS-Tricksを読んでいる場合、あなたは＆＃039;
サイトから未使用のCSSをどのように削除しますか？サイトから未使用のCSSをどのように削除しますか？Apr 14, 2025 am	 10:59 AM
ここに＆＃039;私が前もって知るのが好きなこと：これは難しい問題です。あなたがここに上陸した場合、あなたはあなたが伝えることができるツールを指し示すことを望んでいるので、あなたが＆＃039;
ピクチャーインピクチャーWeb APIの紹介ピクチャーインピクチャーWeb APIの紹介Apr 14, 2025 am	 10:57 AM
Picture-in-Pictureは、2016年にMacos SierraをリリースしたSafariブラウザでWebに初めて登場しました。ユーザーがポップできるようになりました。
ギャツビーを使用してぼやけた効果のために画像を整理して準備する方法ギャツビーを使用してぼやけた効果のために画像を整理して準備する方法Apr 14, 2025 am	 10:56 AM
Gatsbyは、画像の処理と処理の素晴らしい仕事をしています。たとえば、手動で画像の最適化で時間を節約するのに役立ちます
ああ、パディングの割合は親要素の幅に基づいていますああ、パディングの割合は親要素の幅に基づいていますApr 14, 2025 am	 10:55 AM
私は今日、私の頭の中で完全に間違っていたことをパーセンテージベース（％）のパディングについて学びました！パディングの割合はに基づいているといつも思っていました
See all articles
ホットAIツール
Undresser.AI Undress
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
Undress AI Tool
脱衣画像を無料で
Clothoff.io
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AI Hentai Generator
AIヘンタイを無料で生成します。
もっと見る
人気の記事
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
3週間前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定
3週間前By尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
2週間前ByDDD
R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
3週間前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：Myriseのすべてのロックを解除する方法
1 か月前By尊渡假赌尊渡假赌尊渡假赌
もっと見る
ホットツール
Dreamweaver Mac版
Dreamweaver Mac版
ビジュアル Web 開発ツール
Safe Exam Browser
Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
WebStorm Mac版
WebStorm Mac版
便利なJavaScript開発ツール
mPDF
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
DVWA
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
もっと見る
ホットトピック
Gmailメールのログイン入り口はどこですか？
7496
15
CakePHP チュートリアル
1377
52
Steamのアカウント名の形式は何ですか
77
11
Win11 Activation Key Permanent
52
19
NYTの接続はヒントと回答です
19
52
もっと見る