Using CSS to make table-header-Fixed tables

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.