Pure CSS header fixed implementation code
|
There are two main reasons why it is difficult to implement fixed headers with pure CSS. First, IE6, which has the largest market share, does not support position:fixed. Another thing is that people are trying very hard to achieve this effect in a spreadsheet. However, some foreigners have actually achieved this effect with pure CSS, using an astonishing number of CSS hacks... I think that if the code is so difficult to understand and extend, it would be better to use javascript. It happened that I encountered this kind of need today. I thought about it from a different perspective and actually figured it out. We know that CSS is responsible for presentation and HTML is responsible for structure. The same structure, with a different style, can give people a completely different feeling. This also shows that human eyes are easily deceived. Therefore, in the days when DIV+CSS was being enthusiastically promoted, people always wanted to remove tables from the page and use div+span to create "tables" one by one. Although this is not advisable, it also tells us that what the table does, we can also do through some combinations. To put it another way, if one table can't do it, use two. The table above simulates the table header, and the table below simulates the part with scroll bar. Before we go on, let's clarify our requirements, otherwise it's too abstract. First, the table is 4*9, each column is 170px wide, the total is 680px, and the scroll bar defaults to 16px in each browser. Don't forget that width does not include borders. There are 5 vertical borders for four columns, and the total width is 701px. <table>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>Then we divide this table into two. The first table is the header, and the second table needs to have a scroll bar, which means that the overflow style should be applied to its parent element, so it needs to be wrapped in a div. This div should be the same length as the first table. But don’t worry about it. We just put a div outside them, set its width to 701px, and then set the width of these two child elements to 100%. Note that we explicitly add tbody to the table to make the table rendering more efficient. <div id="scrollTable">
<table class="thead">
<tbody>
<tr>
<th>Name</th>
<th>Syntax</th>
<th>Description</th>
<th>Example</th>
</tr>
</tbody>
</table>
<div>
<table class="tbody">
<tbody>
<tr>
<td>Simple attribute Selector</td>
<td>[attr] </td>
<td>Select elements with this attribute</td>
<td>blockquote[title] { <br/>color: red }</td>
</tr>
<tr>
<td>attribute Value Selector</td>
<td>[attr="value"] </td>
<td>Select elements whose attribute value is exactly equal to the given value</td>
<td>h2[align="left"] { <br/>cursor: hand } </td>
</tr>
<tr>
<td>"Begins-with" attribute Value Selector</td>
<td>[attr^="value"] </td>
<td>Select elements whose attribute values begin with the given value</td>
<td>h2[align^="right"] { <br/>cursor: hand } </td>
</tr>
<tr>
<td>"Ends-with" attribute Value Selector</td>
<td>[attr$="value"] </td>
<td>Select elements whose attribute value ends with the given value</td>
<td>div[class$="vml"]{<br/>cursor: hand} </td>
</tr>
<tr>
<td>Substring-match attribute Value Selector</td>
<td>[attr*="value"] </td>
<td>Select the element whose attribute value contains the given value</td>
<td>div[class*="grid"]{<br/> float:left} </td>
</tr>
<tr>
<td>One-Of-Many Attribute Value Selector</td>
<td>[attr~="value"] </td>
<td>The attribute value of the original element is multiple words, and the given value is one of them. </td>
<td>li[class~="last"]{<br/> padding-left:2em} </td>
</tr>
<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 starts with the given value plus "-"</td>
<td>span[lang|="en"]{ <br/>color:green}</td>
</tr>
<tr>
<td>Invert attribute value selector</td>
<td>[attr!="value"] </td>
<td>Non-standard, appears in jQuery</td>
<td>span[class!="red"]{<br/>color:green}</td>
</tr>
</tbody>
</table>
</div>
</div>Presentation layer: #scrollTable {
width:701px;
border: 1px solid #EB8;/*table has no outer border, only the internal td or th has border*/
background: #FF8C00;
}
#scrollTable table {
border-collapse:collapse; /*Set the two tables to be thin-line tables*/
}
#scrollTable table.thead{ /*Table header*/
/*The first child element of div*/
width:100%;
}
#scrollTable table.thead th{/*table header*/
border: 1px solid #EB8;
border-right:#C96;
color:#fff;
background: #FF8C00;/*bright orange*/
}
#scrollTable div{/*table body with scroll bar*/
/*The second child element of div*/
width:100%;
height:200px;
overflow:auto;/*Required*/
}
#scrollTable table.tbody{/*The body of the table with scroll bar*/
width:100%;
border: 1px solid #C96;
border-right:#B74;
color:#666666;
background: #ECE9D8;
}
#scrollTable table.tbody td{/*The grid of the table body with scroll bar*/
border:1px solid #C96;
}Run the code: <!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>Pure CSS to achieve fixed header</title>
<style type="text/css">
#scrollTable {
width:701px;
border: 1px solid #EB8;/*table has no outer border, only the internal td or th has border*/
background: #FF8C00;
}
#scrollTable table {
border-collapse:collapse; /*Set the two tables to be thin-line tables*/
}
#scrollTable table.thead{ /*Table header*/
/*The first child element of div*/
width:100%;
}
#scrollTable table.thead th{/*table header*/
border: 1px solid #EB8;
border-right:#C96;
color:#fff;
background: #FF8C00;/*bright orange*/
}
#scrollTable div{/*table body with scroll bar*/
/*The second child element of div*/
width:100%;
height:200px;
overflow:auto;/*Required*/
}
#scrollTable table.tbody{/*The body of the table with scroll bar*/
width:100%;
border: 1px solid #C96;
border-right:#B74;
color:#666666;
background: #ECE9D8;
}
#scrollTable table.tbody td{/*The grid of the table body with scroll bar*/
border:1px solid #C96;
}
</style>
</head>
<body>
<div id="scrollTable">
<table class="thead">
<tbody>
<tr>
<th>Name</th>
<th>Syntax</th>
<th>Description</th>
<th>Example</th>
</tr>
</tbody>
</table>
<div>
<table class="tbody">
<tbody>
<tr>
<td>Simple attribute Selector</td>
<td>[attr] </td>
<td>Select elements with this attribute</td>
<td>blockquote[title] { <br/>color: red }</td>
</tr>
<tr>
<td>attribute Value Selector</td>
<td>[attr="value"] </td>
<td>Select elements whose attribute value is exactly equal to the given value</td>
<td>h2[align="left"] { <br/>cursor: hand } </td>
</tr>
<tr>
<td>"Begins-with" attribute Value Selector</td>
<td>[attr^="value"] </td>
<td>Select elements whose attribute values begin with the given value</td>
<td>h2[align^="right"] { <br/>cursor: hand } </td>
</tr>
<tr>
<td>"Ends-with" attribute Value Selector</td>
<td>[attr$="value"] </td>
<td>Select elements whose attribute value ends with the given value</td>
<td>div[class$="vml"]{<br/>cursor: hand} </td>
</tr>
<tr>
<td>Substring-match attribute Value Selector</td>
<td>[attr*="value"] </td>
<td>Select the element whose attribute value contains the given value</td>
<td>div[class*="grid"]{<br/> float:left} </td>
</tr>
<tr>
<td>One-Of-Many Attribute Value Selector</td>
<td>[attr~="value"] </td>
<td>The attribute value of the original element is multiple words, and the given value is one of them. </td>
<td>li[class~="last"]{<br/> padding-left:2em} </td>
</tr>
<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 starts with the given value plus "-"</td>
<td>span[lang|="en"]{ <br/>color:green}</td>
</tr>
<tr>
<td>Invert attribute value selector</td>
<td>[attr!="value"] </td>
<td>Non-standard, appears in jQuery</td>
<td>span[class!="red"]{<br/>color:green}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
It was found that the grid on the watch head was not aligned with the grid on the watch 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 CSS2.1's adjacent selectors and CSS3's child element filtering pseudo-classes allow us to set them in a more streamlined way, and separate style from structure, it's a pity that the IE family always lags behind. Let's take a look at their lengths again. Since the last table may be shortened due to the scroll bar, we only need to ensure that the first three columns are of equal length, and the rest are allocated to the last one. In other words, the last one does not need to be set. In addition, the scroll bar style can be set in IE. Let’s play with it. <table class="thead">
<col width="170px"></col> <col width="170px"></col> <col width="170px"></col> <col width="170px"></col>
<tbody>
//********************slightly*****************
</tbody>
</table>
<div>
<table class="tbody">
<col width="170px"></col> <col width="170px"></col> <col width="170px"></col> <col width="170px"></col>
<tbody>
//********************slightly*****************
</tbody>
</table>
</div>Presentation layer: #scrollTable {
width:701px;
border: 1px solid #EB8;/*table has no outer border, only the internal td or th has border*/
background: #FF8C00;
}
#scrollTable table {
border-collapse:collapse; /*Set the two tables to be thin-line tables*/
}
/*The first child element of the 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*/
}
/*Table body with scroll bar*/
/*The second child element of div*/
#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 up and down buttons*/
scrollbar-track-color:#ece9d8;/*The background color of the rectangle where the scroll bar's active block is located*/
scrollbar-highlight-color:#800040;/*The color of the upper left padding of the three small rectangles*/
scrollbar-shadow-color:#800040;/*The color of the padding at the bottom right of the three small rectangles*/
scrollbar-3dlight-color: #EB8;/*The color of the upper left border of the three small rectangles*/
scrollbar-darkshadow-Color:#EB8;/*The color of the lower right border of the three small rectangles*/
}
/*The main body of the watch with scroll bar*/
#scrollTable table.tbody{
width:100%;
border: 1px solid #C96;
border-right:#B74;
color:#666666;
background: #ECE9D8;
}
/*Grid with scroll bar*/
#scrollTable table.tbody td{
border:1px solid #C96;
}Run the code: <!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>Pure CSS to achieve fixed header</title>
<style type="text/css">
#scrollTable {
width:701px;
border: 1px solid #EB8;/*table has no outer border, only the internal td or th has border*/
background: #FF8C00;
}
#scrollTable table {
border-collapse:collapse; /*Set the two tables to be thin-line tables*/
}
/*The first child element of the 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*/
}
/*Table body with scroll bar*/
/*The second child element of div*/
#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 up and down buttons*/
scrollbar-track-color:#ece9d8;/*The background color of the rectangle where the scroll bar's active block is located*/
scrollbar-highlight-color:#800040;/*The color of the upper left padding of the three small rectangles*/
scrollbar-shadow-color:#800040;/*The color of the padding at the bottom right of the three small rectangles*/
scrollbar-3dlight-color: #EB8;/*The color of the upper left border of the three small rectangles*/
scrollbar-darkshadow-Color:#EB8;/*The color of the lower right border of the three small rectangles*/
}
/*The main body of the watch with scroll bar*/
#scrollTable table.tbody{
width:100%;
border: 1px solid #C96;
border-right:#B74;
color:#666666;
background: #ECE9D8;
}
/*Grid with scroll bar*/
#scrollTable table.tbody td{
border:1px solid #C96;
}
</style>
</head>
<body>
<div id="scrollTable">
<table class="thead">
<col width="170px"></col> <col width="170px"></col> <col width="170px"></col> <col width="170px"></col>
<tbody>
<tr>
<th>Name</th>
<th>Syntax</th>
<th>Description</th>
<th>Example</th>
</tr>
</tbody>
</table>
<div>
<table class="tbody">
<col width="170px"></col> <col width="170px"></col> <col width="170px"></col> <col width="170px"></col>
<tbody>
<tr>
<td>Simple attribute Selector</td>
<td>[attr] </td>
<td>Select elements with this attribute</td>
<td>blockquote[title] { <br/>color: red }</td>
</tr>
<tr>
<td>attribute Value Selector</td>
<td>[attr="value"] </td>
<td>Select elements whose attribute value is exactly equal to the given value</td>
<td>h2[align="left"] { <br/>cursor: hand } </td>
</tr>
<tr>
<td>"Begins-with" attribute Value Selector</td>
<td>[attr^="value"] </td>
<td>Select elements whose attribute values begin with the given value</td>
<td>h2[align^="right"] { <br/>cursor: hand } </td>
</tr>
<tr>
<td>"Ends-with" attribute Value Selector</td>
<td>[attr$="value"] </td>
<td>Select elements whose attribute value ends with the given value</td>
<td>div[class$="vml"]{<br/>cursor: hand} </td>
</tr>
<tr>
<td>Substring-match attribute Value Selector</td>
<td>[attr*="value"] </td>
<td>Select the element whose attribute value contains the given value</td>
<td>div[class*="grid"]{<br/> float:left} </td>
</tr>
<tr>
<td>One-Of-Many Attribute Value Selector</td>
<td>[attr~="value"] </td>
<td>The attribute value of the original element is multiple words, and the given value is one of them. </td>
<td>li[class~="last"]{<br/> padding-left:2em} </td>
</tr>
<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 starts with the given value plus "-"</td>
<td>span[lang|="en"]{ <br/>color:green}</td>
</tr>
<tr>
<td>Invert attribute value selector</td>
<td>[attr!="value"] </td>
<td>Non-standard, appears in jQuery</td>
<td>span[class!="red"]{<br/>color:green}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: Summary of 16 XHTML1.0 and HTML Compatibility Guidelines
>>: Detailed explanation of the pitfalls of recording lower_case_table_names in MySQL
Recommend
Analysis of permissions required to run docker
Running Docker requires root privileges. To solve...
Javascript common higher-order functions details
Table of contents 1. Common higher-order function...
Several ways to implement "text overflow truncation and omission" with pure CSS
In our daily development work, text overflow, tru...
How to store text and pictures in MySQL
Large Text Data Types in Oracle Clob long text ty...
Vue uses vue-quill-editor rich text editor and uploads pictures to the server
Table of contents 1. Preparation 2. Define the gl...
Detailed explanation of how to deploy programs on Alibaba Cloud Server and access them directly using domain names
I had nothing to do, so I bought the cheapest Ali...
Detailed process of NTP server configuration under Linux
Table of contents 1. Environment Configuration 1....
Solution to Linux CentOS 6.5 ifconfig cannot query IP
Recently, some friends said that after installing...
How to create an Nginx server with Docker
Operating environment: MAC Docker version: Docker...
Summary of MySQL's commonly used concatenation statements
Preface: In MySQL, the CONCAT() function is used ...
Sample code for a large drop-down menu implemented in pure CSS
This is a large drop-down menu implemented purely...
Briefly understand the two common methods of creating files in Linux terminal
We all know that we can use the mkdir command to ...
Summary of 4 solutions for returning values on WeChat Mini Program pages
Table of contents Usage scenarios Solution 1. Use...
Analysis of the difference between absolute path and relative path in HTML
As shown in the figure: There are many files conne...
Summary of new usage of vi (vim) under Linux
I have used the vi editor for several years, but ...