Code example for fixing table header using pure CSS

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.

                                                                                                                                                                                                                                         

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>

                                                              

名称	语法	说明	例子

  

    

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  

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;
}

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>

                                                                                                         

名称	语法	说明	例子

      

        

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      

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}

              

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.

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

      

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

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;
}

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>

                                                                                                            

名称	语法	说明	例子

      

        

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          

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}

              

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!