communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel CSS > le corps du texte

Exemple de code pour corriger l'en-tête de tableau en utilisant du CSS pur

不言
Libérer： 2018-11-12 15:11:13
avant
2091 Les gens l'ont consulté

Ce que cet article vous apporte est un exemple de code pour implémenter la fixation d'en-tête de tableau en CSS pur. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

La raison pour laquelle il est difficile de corriger l'en-tête du tableau avec du CSS pur est principalement due à deux points. Premièrement, IE6, qui détient la plus grande part de marché, ne prend pas en charge position:fixed. Une autre chose est que les gens veulent obtenir cet effet dans un tableau.

Nous savons que CSS est responsable de la performance et HTML est responsable de la structure. La même structure, mais en changeant le style, donnera aux gens un sentiment complètement différent. Cela montre également que les yeux humains sont facilement trompés. Par conséquent, à l'époque où p+CSS était préconisé avec enthousiasme, les gens voulaient toujours supprimer les tableaux de la page et utilisaient p+span pour créer des « tables » une par une. Bien que ce genre de chose ne soit pas conseillé, cela nous indique également que ce que la table peut faire, nous pouvons aussi le faire à travers certaines combinaisons. En d’autres termes, puisqu’on ne peut pas faire une seule table, seulement deux. Le tableau supérieur simule l'en-tête et le tableau inférieur simule la partie avec des barres de défilement. Avant d’aller plus loin, clarifions d’abord nos besoins, sans être trop abstraits. Premièrement, le tableau mesure 4*9, chaque colonne mesure 170 px de large et le total est de 680 px. La barre de défilement est par défaut de 16 px dans chaque navigateur. N'oubliez pas que la largeur n'inclut pas la bordure. quatre colonnes. La largeur La longueur totale est de 701px. 

Copier après la connexion
Copier après la connexion


  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
    
    
    
    
    
    
    
    
    




Ensuite, nous divisons ce tableau en deux. Le premier tableau est l'en-tête, et le deuxième tableau doit avoir une barre de défilement, indiquant que le style de débordement doit être appliqué à son élément parent, il doit donc le faire. Veste un p. Ce p et le premier tableau doivent être de même longueur. Mais ne vous embêtez pas, nous mettons simplement un p à l'extérieur d'eux, définissons leur largeur à 701 px, puis définissons la largeur de ces deux sous-éléments à 100 %. Notez que nous ajoutons explicitement tbody au tableau pour améliorer l'efficacité du rendu du tableau. 


<p>
  </p>
Copier après la connexion


    
      
        
        
        
        
      
    
  
名称语法说明例子

  

    


      
        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
          
        
      
    
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}

  

Partie couche présentation : 


#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;
}
Copier après la connexion


Exécutez le code : 


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>
Copier après la connexion


      
        
          
            
            
            
            
          
        
      
名称语法说明例子

      

        


       
          
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
          
        
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}

      
    


  

Exemple de code pour corriger len-tête de tableau en utilisant du CSS pur


Découvrez la grille et le tableau de l'en-tête La grille du corps n'est pas alignée. À ce stade, nous devons utiliser la balise col. col nous permet de définir uniformément la couleur d'arrière-plan, l'alignement du texte et la largeur de td ou th avec la même valeur d'index dans tbody. Bien que le sélecteur adjacent de CSS2.1 et la pseudo-classe de filtrage de sous-éléments de CSS3 nous permettent de les définir de manière plus rationalisée et que le style et la structure soient séparés, il est dommage que la famille IE soit toujours à la traîne . Regardons à nouveau leurs longueurs. Puisque le dernier tableau peut être compressé par la barre de défilement et raccourci en longueur, nous devons simplement nous assurer que les longueurs des trois premières colonnes sont égales et que le reste est alloué à la dernière. En d’autres termes, il n’est pas nécessaire de définir le dernier. De plus, vous pouvez définir le style de la barre de défilement dans IE, jouons avec. 


Copier après la connexion
Copier après la connexion


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




 

      


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




 
Partie couche présentation : 


#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;
}
Copier après la connexion


Code d'exécution : 


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>
Copier après la connexion


                  
          
            
            
            
            
          
        
      



名称语法说明例子

      

        


                      
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
          
        



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}

      
    

  

13133049-7adf059f2811f093 (1).png
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
                

            

            

                                

                    Étiquettes associées：
                    

                        css                    

                

                                
source：segmentfault.com

                            

            

                                    
                        Article précédent：Qu'est-ce que la  ? A quoi ça sert ?
                    
                                    
                        Article suivant：Exemple de code CSS pour obtenir un effet de graphique à colonnes
                    
                            

            

       
                
Déclaration de ce site Web

                
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

            

           

            

                
Derniers articles par auteur

                
            

            

                
Derniers numéros

                

                                        

                        

                            Où sont les didacticiels sur la cartographie mentale CSS ?
                            Didacticiel
                            

                                

                                     Depuis 2024-04-16 10:10:18
                                

                                

                                    
  0 

                                    
0

                                    
1335

                                

                            

                        

                    

                    

                                        

                        

                            La page ne peut soudainement plus extraire le CSS ou le bootstrap
                            Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi...
                            

                                

                                     Depuis 2024-04-06 21:58:04
                                

                                

                                    
  0 

                                    
1

                                    
800

                                

                            

                        

                    

                    

                                        

                        

                            Modifier dynamiquement les styles CSS en ligne dans Javafx
                            J'essaie de changer l'image d'arrière-plan d'un volet lorsque l'application est agrandie. ...
                            

                                

                                     Depuis 2024-04-06 20:57:16
                                

                                

                                    
  0 

                                    
1

                                    
487

                                

                            

                        

                    

                    

                                        

                        

                            Comment empiler les éléments flottants verticalement plutôt qu'horizontalement en CSS ?
                            J'essaie de créer une page Web avec deux colonnes, avec le contenu principal d'un côté et ...
                            

                                

                                     Depuis 2024-04-06 20:45:26
                                

                                

                                    
  0 

                                    
2

                                    
386

                                

                            

                        

                    

                    

                                        

                        

                            Existe-t-il un moyen de forcer le texte de la flexbox à être centré verticalement, quel que soit l'autre code CSS dont nous disposons ?
                            J'ai le code CSS suivant qui fait partie d'un code CSS plus vaste utilisé dans un site Web...
                            

                                

                                     Depuis 2024-04-06 20:41:51
                                

                                

                                    
  0 

                                    
1

                                    
518

                                

                            

                        

                    

                    

                                    

            

            

                

                    
Rubriques connexes

                    Plus>
                    
                

                

                    
                

            

        

    

    

        

            
Recommandations populaires

            

                
            

        

        
        

            

                
Tutoriels populaires

                Plus>
                
            

            

                

                    
Tutoriels associés 

                    
Recommandations populaires

                    
Derniers cours

                

                
                
                
            

            
        


        

            

                
Derniers téléchargements

                Plus>
                
            

                        
            

                

                    
effets Web 

                    
Code source du site Web

                    
Matériel du site Web

                    
Modèle frontal