Yesterday I need to upgrade GUI and function of existing project. One of files in this project, our old programmer use very very awesome code as follow:

view plain print about
1<span style="position:absolute;z-index:9">
2    <table width="100%" border="1">
3        <tr>
4            <th>ID</td>
5            <th>Name</td>
6            <th>AGE</td>
7        </tr>
8    </table>
9</span>        
10<table width="100%" border="1">
11    <tr>
12        <td>1.</td>
13        <td>PPShein</td>
14        <td>28</td>
15    </tr>
16    <tr>
17        <td>2.</td>
18        <td>Rob</td>
19        <td>27</td>
20    </tr>
21</table>

I cannot convince why he/she didn't use simple CSS for floating table header. I think he/she might be weak in CSS for sure. Because look through above coding, some of web developer might say it's dirty code or not up to HTML structure. Ok, I need to edit something in this file for float table header as follow:

view plain print about
1<!---
2    This CSS code must be in .css file.
3    As example, I just put CSS code in this file.
4--->    
5<style>
6thead tr {
7    position: relative;
8    top: expression(this.offsetParent.scrollTop);
9}    
10</style>
11
12<table width="100%" border="1">
13    <thead>
14        <tr>
15            <th>ID</td>
16            <th>Name</td>
17            <th>AGE</td>
18        </tr>
19    </thead>
20    <tbody>
21        <tr>
22            <td>1.</td>
23            <td>PPShein</td>
24            <td>28</td>
25        </tr>
26        <tr>
27            <td>2.</td>
28            <td>Rob</td>
29            <td>27</td>
30        </tr>
31    </tbody>
32</table>

Above my code is very simple and not dirty at all. And up to standard to HTML structure :) .

This entry was posted on December 8, 2010 at 7:41 PM and has received 2269 views. There are currently 6 comments. Print this entry.