Using CSS to make table-header-Fixed tables

Source: Internet
Author: User
Tags contains empty header first row
Css

In the production of Web pages, tables are usually used to organize data in rows and columns. This may be the case in use, and we're going to be listing a lot of data for a long time. At this time, browsing is very inconvenient, look at the back of the data often have to scroll to the top of the page to see the corresponding table head.

To solve this problem, we usually think of using a framework or a built-in framework (IFRAME) in the way, the table header content in the top of the frame page, the table content in the following frame, so it is easier to browse. However, the use of frameworks is not a good choice.

Here is a better way to use a simple CSS can be used to achieve the table header fixed table (in IE and Firefox, Mozilla through).

This method is done in a two-row table, the above line is placed as the table header, the following line to place a scrolling div block, inside the block contains the data contents of the table. The following are specific practices:

First, we make a table that contains only two rows and one column:

<table summary= "" "cellpadding=" 0 "cellspacing=" 0 "align=" center "title=" "width=" >
<tr>
<td> Row One </td>
</tr>
<tr>
<td> two Row two </td>
</tr>
</table>

The results of this form are as follows:

Row a column A
Row two column two


Next, we embed the table in the first row of the table above with the form header, as follows:

<table summary= "" cellpadding= "0" cellspacing= "0" width= "100%" >
<tr>
<TD colspan= "5" align= "Center" > Market Monthly Sales Statistics </td>
</tr>
<tr>
<TD width= "24%" > Product name </td>
<TD width= "24%" > Early </td>
<TD width= "24%" > Mid </td>
<TD width= "24%" > Late </td>
<TD width= "4%" > </td>
</tr>
</table>

The results we see are as follows:

Sales statistics of shopping malls this month
Product Name Early Mid - Late  
Row two column two

The last cell in the table as the header, the contents are empty. The reason for this is that the scroll bar will appear in the future data content, it is also occupied a certain size, in order to align up and down, here is considered empty.

Below, we add a (DIV) in the next line, the cell in row two column two, which contains a table-arranged data. Note the CSS settings for block (DIV) here: Overflow:auto. It says that scroll bars are automatically displayed when content is out of bounds. In addition, the size of the cell padding here can be set, if it is "0", you may find that there is no alignment, at this point you can appropriately increase the cell fill. The following code is as follows:

<div style= "height:150px; Overflow:auto; " >
<table summary= "" cellpadding= "cellspacing=" 0 "width=" 96% ">
<tr>
<TD width= "25%" > Detergent </td>
<TD width= "25%" >2321</td>
<TD width= "25%" >4521</td>
<TD width= "25%" >1203</td>
</tr>
<tr>
<TD width= "25%" > Gao Lu Jie </td>
<TD width= "25%" >1652</td>
<TD width= "25%" >2541</td>
<TD width= "25%" >3652</td>
</tr>
.
.
.
</table>
<div>

After that, embed it in the cell in the second row of the outermost table, and the result is as follows:

 

Sales statistics of shopping malls this month
Product Name Early Mid - Late  
Dishwashing detergent 2321 4521 1203
Gao Lu Jie 1652 2541 3652
Dishwashing detergent 2321 4521 1203
Gao Lu Jie 1652 2541 3652
Dishwashing detergent 2321 4521 1203
Gao Lu Jie 1652 2541 3652
Dishwashing detergent 2321 4521 1203
Gao Lu Jie 1652 2541 3652
Dishwashing detergent 2321 4521 1203
Gao Lu Jie 1652 2541 3652
Dishwashing detergent 2321 4521 1203
Gao Lu Jie 1652 2541 3652
Dishwashing detergent 2321 4521 1203
Gao Lu Jie 1652 2541 3652
Dishwashing detergent 2321 4521 1203
Gao Lu Jie 1652 2541 3652
Dishwashing detergent 2321 4521 1203
Gao Lu Jie 1652 2541 3652


Next, beautify the table and see the following special table with a good header and data scrolling:


 

Sales statistics of shopping malls this month
Product Name Early Mid - Late  
Dishwashing detergent 2321 4521 1203
Gao Lu Jie 1652 2541 3652
Dishwashing detergent 2321 4521 1203
Gao Lu Jie 1652 2541 3652
Dishwashing detergent 2321 4521 1203
Gao Lu Jie 1652 2541 3652
Dishwashing detergent 2321 4521 1203
Gao Lu Jie 1652 2541 3652
Dishwashing detergent 2321 4521 1203
Gao Lu Jie 1652 2541 3652
Dishwashing detergent 2321 4521 1203
Gao Lu Jie 1652 2541 3652
Dishwashing detergent 2321 4521 1203
Gao Lu Jie 1652 2541 3652
Dishwashing detergent 2321 4521 1203
Gao Lu Jie 1652 2541 3652
Dishwashing detergent 2321 4521 1203
Gao Lu Jie 1652 2541 3652


The key to this example is a div with a Overflow:auto attribute in the table. Familiar with CSS should know, overflow can also be set to scroll value, that is, Overflow:scroll, its role is to let div when needed, vertical and horizontal direction are added scroll bar.

With this feature, we can also make the left side fixed, and the right scrolling data table out.



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.