Code example for fixing table header using pure CSS

不言
Release: 2018-11-12 15:11:13
forward
2074 people have browsed it

The content of this article is about the code example for realizing table header fixation in pure CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The reason why it is difficult to fix the table header with pure CSS is mainly due to two points. First, IE6, which has the largest market share, does not support position:fixed. Another thing is that people want to achieve this effect in a table.

We know that CSS is responsible for performance, and HTML is responsible for structure. The same structure, but changing the style, will give people a completely different feeling. This also shows that human eyes are easily deceived. Therefore, in the days when p CSS was enthusiastically advocated, people always wanted to remove tables from the page and used p span to create "tables" one by one. Although this kind of thing is not advisable, it also tells us that what table can do, we can also do it through some combinations. To put it another way, since one table cannot be done, just two. The upper table simulates the header, and the lower table simulates the part with scroll bars. Before we go any further, let's clarify our needs first, without being too abstract. First, the table is 4*9, each column is 170px wide, and the total is 680px. The scroll bar defaults to 16px in each browser. Don’t forget, the width does not include the border. There are 5 vertical borders in four columns. The width Total length is 701px.

Copy after login
Copy after login
                                                                                                                                                                                                                                         
    
    
    
    
    
    
    
    
    

Then we divide this table into two. The first table is the header, and the second table should have a scroll bar, which means that the overflow style should be applied to its parent element, so it needs to be coated with a p. This p and the first table should be of equal length. But don’t bother, we just put a p outside them, set their width to 701px, and then set the width of these two sub-elements to 100%. Note that we explicitly add tbody to the table to improve the rendering efficiency of the table.

<p>
  </p>
Copy after login
                                                              
名称语法说明例子
  

    

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
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}
  

Presentation layer part:

#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;
}
Copy after login

Running 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>
Copy after login
                                                                                                         
名称语法说明例子
      

        

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
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}
              

Code example for fixing table header using pure CSS

It is found that the grid of the table header is not aligned with the grid of the table body. At this time we need to use the col tag. col allows us to uniformly set the background color, text alignment and width of td or th with the same index value in tbody. Although the adjacent selector of CSS2.1 and the sub-element filtering pseudo-class of CSS3 allow us to set them in a more streamlined way, and the style and structure are separated, it is a pity that the IE family always lags behind. Let's take a look at their lengths again. Since the last table may be squeezed by the scroll bar and shortened in length, we just need to ensure that the lengths of the first three columns are equal, and the rest are allocated to the last one. In other words, the last one does not need to be set. In addition, you can set the style of the scroll bar in IE, let's play around with it.

Copy after login
Copy after login
                   //********************略*****************           
 

      

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

Presentation layer part:

#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;
}
Copy after login

Running 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为细线表格*/
      }
      /*表头 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>
Copy after login
                                                                                                            
名称语法说明例子
      

        

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
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

The above is the detailed content of Code example for fixing table header using pure CSS. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:segmentfault.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!