Fixed Header with pure CSS

It is difficult to fix the header with pure CSS. First, IE6, which occupies the largest market share, does not support position: fixed. Another is that people want to achieve this effect in a table if they want to break their headers. However, the foreign real use of pure CSS to achieve this effect, using an astonishing number of CSS hacks ...... I think it would be better to use javascript if the code is so obscure and difficult to expand. I happened to have this kind of requirement today. I thought about it from another perspective.

We know that CSS is responsible for the performance, HTML is responsible for the structure, the same structure, change the style, give people a completely different feeling, it also shows that people's eyes are very easy to be cheated. As a result, in the days when DIV + CSS was enthusiastically promoted, people always wanted to remove the table on the page and use div + span to create "tables" one by one. Although this kind of thing is not desirable, it also tells us that we can do what table is doing through some combinations. In another way, since one table cannot be done, let's do it. The preceding table simulates the header, and the following table simulates the part with a scroll bar. Before we proceed, let's clarify our needs. It's not abstract. First, the table is 4*9, each column is 170px in width, which is 680px in total, and the scroll bar is 16px by default in each browser. Don't forget that width does not include border, the four columns have five vertical border with a total width of 701px.

<table >  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr></table>

Then we split the table into two parts. The first table is the header, and the second table should contain a scroll bar, which indicates that the overflow style should be applied to its parent element, so it needs to coat a div. The div and the first table should be of the same length. However, you don't have to worry about it. We set the div to 701px, and set the width of the two child elements to 100%. Note: We explicitly add the tbody to the table to improve the rendering efficiency of the table.

<Div id = "scrollTable"> <table class = "thead"> <tbody> <tr> <th> name </th> <th> syntax </th> <th>> note </th> <th> example </th> </tr> </tbody> </table> <div> <table class = "tbody"> <tbody> <tr> <td> Simple attribute Selector </td> <td> [attr] </td> <td> select an element with this attribute </td> <td> blockquote [title] {<br/> color: red} </td> </tr> <td> attribute Value Selector </td> <td> [attr = "value"] </td> <td> select the element whose property value is exactly the same as the given value </td> <td> h2 [align = "le Ft "] {<br/> cursor: hand} </td> </tr> <td> "Begins-with" attribute Value Selector </td> <td> [attr ^ = "value"] </td> <td> select the element whose attribute value starts with the given value </td> <td> h2 [align ^ = "right"] {<br/> cursor: hand} </td> </tr> <td> "Ends-with" attribute Value Selector </td> <td> [attr $ = "value"] </td> <td> select the element whose property value ends with the given value </td> <td> div [class $ = "vml"] {<br/> cursor: hand} </td> </tr> <td> Substring-match attribute Value Select Or </td> <td> [attr * = "value"] </td> <td> selects the element whose property value contains the given value </td> <td> div [class * = "grid"] {<br/> float: left} </td> </tr> <td> One-Of-Snapshot Attribute Value Selector </td> <td> [attr ~ = "Value"] </td> <td> the attribute value of the original element is multiple words, and the value is one of them. </Td> <td> li [class ~ = "Last"] {<br/> padding-left: 2em} </td> </tr> <td> Hyphen Attribute Value Selector </td> <td> [attr | = "value"] </td> <td> the attribute value of the original element is equal to the given value, or start with a given value plus "-" </td> <td> span [lang | = "en"] {<br/> color: green} </td> </tr> <td> select a property value selector </td> <td> [attr! = "Value"] </td> <td> non-standard, appear in jQuery </td> <td> span [class! = "Red"] {<br/> color: green} </td> </tr> </tbody> </table> </div>

Performance layer:

# ScrollTable {width: 701px; border: 1px solid # EB8;/* The table has no peripheral border, and only the internal td or th has border */background: # FF8C00 ;} # scrollTable table {border-collapse: collapse;/* set the two tables to a thin table */} # scrollTable table. thead {/* Header * // * div's first sub-element */width: 100%;} # scrollTable table. thead th {/* Header */border: 1px solid # EB8; border-right: # C96; color: # fff; background: # FF8C00; /* bright orange */} # scrollTable div {/* shows the table body of the scroll bar * // the second sub-element of */width: 100%; height: 200px; overflow: auto; /* required */} # scrollTable table. tbody {/* front body of the table that can bring the scroll bar */width: 100%; border: 1px solid # C96; border-right: # B74; color: #666666; background: # ECE9D8;} # scrollTable table. tbody td {/* the lattice of the table with the scroll bar */border: 1px solid # C96 ;}

<Br/> <! Doctype html> <br/> <ptml dir = "ltr" lang = "zh-CN"> <br/> <pead> <br/> <meta charset = "UTF-8" /> <br/> <title> pure CSS achieves Fixed Header by situ zhengmei </title> <br/> <style type = "text/css"> </p> <p> # scrollTable {<br/> width: 701px; <br/> border: 1px solid # EB8;/* The table has no peripheral border, and only the internal td or th has border */<br/> background: # FF8C00; <br/>}</p> <p> # scrollTable table {<br/> border-collapse: collapse; /* set the two tables as a thin table */<br/>}</p> <p> # ScrollTable table. thead {/* Header */<br/>/* First child element of div */<br/> width: 100%; <br/>}</p> <p> # scrollTable table. thead th {/* Header */<br/> border: 1px solid # EB8; <br/> border-right: # C96; <br/> color: # fff; <br/> background: # FF8C00; /* bright orange */<br/>}</p> <p> # scrollTable div {/* The table body that can bring the scroll bar */<br/>/* the second sub-div element */<br/> width: 100%; <br/> height: 200px; <br/> overflow: auto;/* required */<br/>}</p> <p> # scrollTable table. tbod Y {/* front body of the table with the scroll bar */<br/> width: 100%; <br/> border: 1px solid # C96; <br/> border-right: # B74; <br/> color: #666666; <br/> background: # ECE9D8; <br/>}< br/> # scrollTable. tbody td {/* The table body grid that can bring the scroll bar */<br/> border: 1px solid # C96; <br/>}</p> </style> <br/> </pead> <br/> <body> <br/> <div id =" scrollTable "> <br/> <table class =" thead "> </p> <tbody> <br/> <tr> <br/> <th> name </th> <br/> <th> syntax </th> <br/> <Th> description </th> <br/> <th> example </th> <br/> </tr> <br/> </tbody> <br/> </table> <br/> <div> <br/> <table class = "tbody"> </p> <tbody> <br/> <tr> <br/> <td> Simple attribute Selector </td> <br/> <td> [attr] </td> <br/> <td> select this attribute </td> <br/> <td> blockquote [title] {<br/> color: red} </td> <br/> </tr> <br/> <td> attribute Value Selector </td> <br/> <td> [attr = "value"] </td> <br/> <td> select the value with the exact value equal to the given value Element </td> <br/> <td> h2 [align = "left"] {<br/> cursor: hand} </td> <br/> </tr> <br/> <td> "Begins-with" attribute Value Selector </td> <br/> <td> [attr ^ = "value"] </td> <br/> <td> selects elements whose attribute values start with a given value </td> <br /> <td> h2 [align ^ = "right"] {<br/> cursor: hand} </td> <br/> </tr> <br/> <td> "Ends-with" attribute Value Selector </td> <br/> <td> [attr $ = "value"] </td> <br/> <td> select an element whose attribute value ends with a given value </td> <br/> <Td> div [class $ = "vml"] {<br/> cursor: hand} </td> <br/> </tr> <br/> <td> Substring-match attribute Value Selector </td> <br /> <td> [attr * = "value"] </td> <br/> <td> select the element whose property value contains the given value </td> <br/> <td> div [class * = "grid"] {<br/> float: left} </td> <br/> </tr> <br/> <td> One-Of-choice Attribute Value Selector </td> <br/> <td> [attr ~ = "Value"] </td> <br/> <td> the attribute value of the original element is multiple words and the value is one of them. </Td> <br/> <td> li [class ~ = "Last"] {<br/> padding-left: 2em} </td> <br/> </tr> <br/> <td> Hyphen Attribute Value Selector </td> <br/> <td> [attr | = "value"] </td> <br/> <td> the attribute value of the original element is equal to the given value, or start with a given value plus "-" </td> <br/> <td> span [lang | = "en"] {<br/> color: green} </td> <br/> </tr> <br/> <td> select the attribute value selector </td> <br/> <td> [attr! = "Value"] </td> <br/> <td> Non-Standard </td> <br/> <td> span [class! = "Red"] {<br/> color: green} </td> <br/> </tr> <br/> </tbody> <br/> </table> <br/> </div> <br /> </div> </p> </body> <br/> </ptml> <br/>

Run code

It is found that the grid of the table header is not aligned with the grid of the table body. In this case, we need to use the col label. col allows us to set the background color of the td or th with the same index value in the tbody, and the text alignment and width. 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 is always dragging on. Let's take a look at their length. Since the last table may be squashed by the scroll bar, we can ensure that the length of the first three columns is equal, and the rest are allocated to the last one, in other words, you do not need to set the last one. In addition, you can set the scroll bar style under IE. Let's take a look.

<Table class = "thead"> <col width = "170px"> </col> <col width = "170px"> </col> <col width = "170px"> </col> <tbody> *** * ************* </tbody> </table> <div> <table class = "tbody"> <col width = "170px"> </col> <col width = "170px"> </col> <col width = "170px"> </col> <tbody>/ /********************************* </tbody> </table> </div>

Performance layer:

# ScrollTable {width: 701px; border: 1px solid # EB8;/* The table has no peripheral border, and only the internal td or th has border */background: # FF8C00 ;} # scrollTable table {border-collapse: collapse;/* set the two tables as the first child element of the line table */}/* Header div **/# scrollTable table. thead {width: 100%;}/* Header */# scrollTable table. thead th {border: 1px solid # EB8; border-right: # C96; color: # fff; background: # FF8C00; /* bright orange */}/* display body of the scroll bar * // the second sub-element of */# scrollTable div {width: 100%; height: 200px; overflow: auto; /* required */scrollbar-face-color: # EB8;/* the background color of the three small rectangles */scrollbar-base-color: # ece9d8; /* the foreground color of the three small rectangles */scrollbar-arrow-color: # FF8C00;/* the color of the triangle arrow in the upper and lower buttons */scrollbar-track-color: # ece9d8; /* the background color of the rectangle where the movable block of the scroll bar is located */scrollbar-highlight-color: #800040; /* the color of the padding on the top left of the three small rectangles */scrollbar-shadow-color: #800040;/* the color of the padding on the bottom right of the three small rectangles */scrollbar-3dlight-color: # EB8; /* The border Color on the top left of the three small rectangles */scrollbar-darkshadow-Color: # EB8; /* the color of the bottom right border of the three small rectangles */}/* The front body of the table with the scroll bar */# scrollTable table. tbody {width: 100%; border: 1px solid # C96; border-right: # B74; color: #666666; background: # ECE9D8 ;} /* the grid of the table with the scroll bar */# scrollTable table. tbody td {border: 1px solid # C96 ;}

<Br/> <! Doctype html> <br/> <ptml dir = "ltr" lang = "zh-CN"> <br/> <pead> <br/> <meta charset = "UTF-8" /> <br/> <title> pure CSS achieves Fixed Header by situ zhengmei </title> <br/> <style type = "text/css"> </p> <p> # scrollTable {<br/> width: 701px; <br/> border: 1px solid # EB8;/* The table has no peripheral border, and only the internal td or th has border */<br/> background: # FF8C00; <br/>}</p> <p> # scrollTable table {<br/> border-collapse: collapse; /* set the two tables as a thin table */<br/>}< br/> /* First child element of the div header **/<br/> # scrollTable table. thead {<br/> width: 100%; <br/>}< br/>/* Header */<br/> # scrollTable table. thead th {<br/> border: 1px solid # EB8; <br/> border-right: # C96; <br/> color: # fff; <br/> background: # FF8C00; /* bright orange */<br/>}< br/>/* The table body that can bring the scroll bar */<br/>/* the second sub-element of the div */<br/> # scrollTable div {<br/> width: 100%; <br/> height: 200px; <br/> overflow: auto;/* required */<br/> scrollbar-face-color: # EB 8;/* the background color of the three small rectangles */<br/> scrollbar-base-color: # ece9d8; /* the foreground color of the three small rectangles */<br/> scrollbar-arrow-color: # FF8C00; /* color of the arrow in the upper and lower buttons */<br/> scrollbar-track-color: # ece9d8; /* the background color of the rectangle where the movable block of the scroll bar is located */<br/> scrollbar-highlight-color: #800040; /* the padding color on the top left of the three small rectangles */<br/> scrollbar-shadow-color: #800040; /* the color of the padding at the bottom right of the three small rectangles */<br/> scrollbar-3dlight-color: # EB8; /* The border Color on the top left of the three small rectangles */<br/> scrollbar-darkshadow-Color: # EB8 ;/* The color of the bottom right border of the three rectangles */<br/>}< br/>/* Body of the table with the scroll bar */<br/> # scrollTable table. tbody {<br/> width: 100%; <br/> border: 1px solid # C96; <br/> border-right: # B74; <br/> color: #666666; <br/> background: # ECE9D8; <br/>}< br/>/* check the table body with the scroll bar */<br/> # scrollTable table. tbody td {<br/> border: 1px solid # C96; <br/>}</p> </style> <br/> </pead> <br/> <body> <br/> <div id =" scrollTable "> <br/> <table class =" Ad "> <br/> <col width =" 170px "> </col> <col width =" 170px "> </col> <col width =" 170px "> </col> <br/> <tbody> <br/> <tr> <br/> <th> name </th> <br/> <th> syntax </th> <br/> <th> description </th> <br/> <th> example </th> <br/> </tr> <br/> </tbody> <br/> </table> <br/> <div> <br/> <table class = "tbody"> <br/> <col width = "170px"> </col> <col width = "170px"> </col> <col width = "170px"> </col> </ col> <br/> <tbody> <br/> <tr> <B R/> <td> Simple attribute Selector </td> <br/> <td> [attr] </td> <br/> <td> select an element with this attribute </td> <br/> <td> blockquote [title] {<br/> color: red} </td> <br/> </tr> <br/> <td> attribute Value Selector </td> <br/> <td> [attr = "value"] </td> <br/> <td> select the element whose attribute value is exactly equal to the given value </td> <br/> <td> h2 [align = "left"] {<br/> cursor: hand} </td> <br/> </tr> <br/> <td> "Begins-with" attribute Value Selector </td> <B R/> <td> [attr ^ = "value"] </td> <br/> <td> selects elements whose attribute values start with a given value </td> <br/> <td> h2 [align ^ = "right"] {<br/> cursor: hand} </td> <br/> </tr> <br/> <td> "Ends-with" attribute Value Selector </td> <br/> <td> [attr $ = "value"] </td> <br/> <td> select an element whose attribute value ends with a given value </td> <br /> <td> div [class $ = "vml"] {<br/> cursor: hand} </td> <br/> </tr> <br/> <td> Substring-match attribute Value Selector </td> <br /> <td> [Tr * = "value"] </td> <br/> <td> select an element whose property value contains the given value </td> <br/> <td> div [class * = "grid"] {<br/> float: left} </td> <br/> </tr> <br/> <td> One-Of-choice Attribute Value Selector </td> <br/> <td> [attr ~ = "Value"] </td> <br/> <td> the attribute value of the original element is multiple words and the value is one of them. </Td> <br/> <td> li [class ~ = "Last"] {<br/> padding-left: 2em} </td> <br/> </tr> <br/> <td> Hyphen Attribute Value Selector </td> <br/> <td> [attr | = "value"] </td> <br/> <td> the attribute value of the original element is equal to the given value, or start with a given value plus "-" </td> <br/> <td> span [lang | = "en"] {<br/> color: green} </td> <br/> </tr> <br/> <td> select the attribute value selector </td> <br/> <td> [attr! = "Value"] </td> <br/> <td> Non-Standard </td> <br/> <td> span [class! = "Red"] {<br/> color: green} </td> <br/> </tr> <br/> </tbody> <br/> </table> <br/> </div> <br /> </div> </p> </body> <br/> </ptml> <br/>

Run code