Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use pure CSS to achieve header fixation, the article is very detailed, has a certain reference value, interested friends must read it!

We know that CSS is responsible for performance, HTML is responsible for the structure, the same structure, change the style, give people a completely different feeling, which also shows that people's eyes are very gullible. Therefore, in the days of fanatical advocacy of p+CSS, people always want to remove table from the page and use p+span to make a "table" one by one. Although this kind of thing is not advisable, it also tells us that we can do what table does through some combinations. To put it another way, since one table can't do it, just two. The table simulation header above and the table simulation section with scroll bars below. Before we go on, let's clarify our needs, or it will be too abstract. First of all, the table is 4: 9, each column width 170px, always 680px, scroll bar in each browser default to 16px, do not forget, width does not include border, four columns have 5 vertical border, the total width of 701px.

Then we split the table in two, with the first table as the header and the second table with a scroll bar indicating that we want to apply the overflow style to its parent element, so it needs to coat a p. This p should be the same length as the first table. But don't bother, let's set a p outside them, set its width to 701px, and then set the width of both child elements to 100%. Note that we explicitly add tbody to table to improve the rendering efficiency of the table.

Name

Grammar.

Description

Exampl

SimpleattributeSelector

[attr]

Select the element with this attribute

Blockquote [title] {color:red}

AttributeValueSelector

[attr= "value"]

Select the element whose attribute value is exactly equal to the given value.

H3 [align= "left"] {cursor:hand}

"Begins-with" attributeValueSelector

[attr^ = "value"]

Select the element whose attribute value begins with a given value

H3 [Align^ = "right"] {cursor:hand}

"Ends-with" attributeValueSelector

[attr$= "value"]

Select the element whose attribute value ends with a given value

P [class$= "vml"] {cursor:hand}

Substring-matchattributeValueSelector

[attr*= "value"]

Select the element whose attribute value contains the given value

P [class*= "grid"] {float:left}

One-Of-ManyAttributeValueSelector

[attr~= "value"]

The attribute value of the original element is multiple words, and the value given is one of them.

Li [class~= "last"] {padding-left:2em}

HyphenAttributeValueSelector

[attr | = "value"]

The attribute value of the original element is equal to the given value, or begins with the given value plus "-"

Span [lang | = "en"] {color:green}

Invert attribute value selector

[attractively = "value"]

Non-standard, appearing in jQuery

Span [classrooms = "red"] {color:green}

Presentation layer section:

# scrollTable {

Width:701px

Border:1pxsolid#EB8;/*table has no peripheral border, only internal td or th has border*/

Background:#FF8C00

}

# scrollTabletable {

Border-collapse:collapse;/* uniformly sets two table to thin line table * /

}

# scrollTabletable.thead {/ * header * /

The first child element of / * p * /

Width:100%

}

# scrollTabletable.theadth {/ * header * /

Border:1pxsolid#EB8

Border-right:#C96

Color:#fff

Background:#FF8C00;/* bright orange * /

}

# scrollTablep {/ * body with scroll bar * /

The second child element of / * p * /

Width:100%

Height:200px

Overflow:auto;/* required * /

}

# scrollTabletable.tbody {/ * body with scroll bar * /

Width:100%

Border:1pxsolid#C96

Border-right:#B74

Color:#666666

Background:#ECE9D8

}

# scrollTabletable.tbodytd {/ * the grid of the body with scroll bars * /

Border:1pxsolid#C96

}

Run the code:

Realization of header fixing by pure CSS

# scrollTable {

Width:701px

Border:1pxsolid#EB8;/*table has no peripheral border, only internal td or th has border*/

Background:#FF8C00

}

# scrollTabletable {

Border-collapse:collapse;/* uniformly sets two table to thin line table * /

}

# scrollTabletable.thead {/ * header * /

The first child element of / * p * /

Width:100%

}

# scrollTabletable.theadth {/ * header * /

Border:1pxsolid#EB8

Border-right:#C96

Color:#fff

Background:#FF8C00;/* bright orange * /

}

# scrollTablep {/ * body with scroll bar * /

The second child element of / * p * /

Width:100%

Height:200px

Overflow:auto;/* required * /

}

# scrollTabletable.tbody {/ * body with scroll bar * /

Width:100%

Border:1pxsolid#C96

Border-right:#B74

Color:#666666

Background:#ECE9D8

}

# scrollTabletable.tbodytd {/ * the grid of the body with scroll bars * /

Border:1pxsolid#C96

}

Name

Grammar.

Description

Exampl

SimpleattributeSelector

[attr]

Select the element with this attribute

Blockquote [title] {color:red}

AttributeValueSelector

[attr= "value"]

Select the element whose attribute value is exactly equal to the given value.

H3 [align= "left"] {cursor:hand}

"Begins-with" attributeValueSelector

[attr^ = "value"]

Select the element whose attribute value begins with a given value

H3 [Align^ = "right"] {cursor:hand}

"Ends-with" attributeValueSelector

[attr$= "value"]

Select the element whose attribute value ends with a given value

P [class$= "vml"] {cursor:hand}

Substring-matchattributeValueSelector

[attr*= "value"]

Select the element whose attribute value contains the given value

P [class*= "grid"] {float:left}

One-Of-ManyAttributeValueSelector

[attr~= "value"]

The attribute value of the original element is multiple words, and the value given is one of them.

Li [class~= "last"] {padding-left:2em}

HyphenAttributeValueSelector

[attr | = "value"]

The attribute value of the original element is equal to the given value, or begins with the given value plus "-"

Span [lang | = "en"] {color:green}

Invert attribute value selector

[attractively = "value"]

Non-standard, appearing in jQuery

Span [classrooms = "red"] {color:green}

The above is all the contents of the article "how to use pure CSS to achieve header fixing". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.