轉:用CSS固定HTML表頭

來源:互聯網
上載者:User

轉自:http://blog.sina.com.cn/s/blog_4b57e1d40100assv.html

最近研究固定HTML表頭,找了幾種方法都不怎麼樣,終於找了一個比較好的方法,共用一下:

原始碼在這裡!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</HEAD>
<BODY>
<div style="height: 250px; overflow-Y: auto;width:500px">
<table border=1 width="100%">
    <tr style="background-color:red;position:relative;top:expression(this.offsetParent.scrollTop-2);">
   <td>Name</td>
   <td>Age</td>
   <td>Position</td>
   <td>Income</td>
   <td>Gender</td>
    </tr>
   <tr>
   <td>John</td>
   <td>37</td>
   <td>Managing director</td>
   <td>90.000</td>
   <td>Male</td>
  </tr>
  <tr>
   <td>Susan</td>
   <td>34</td>
   <td>Partner</td>
   <td>90.000</td>
   <td>Female</td>
  </tr>
  <tr>
   <td>David</td>
   <td>29</td>
   <td>Head of production</td>
   <td>70.000</td>
   <td>Male</td>
  </tr>
  <tr>
   <td>Laura</td>
   <td>29</td>
   <td>Head of marketing</td>
   <td>70.000</td>
   <td>Female</td>
  </tr>
  <tr>
   <td>Kate</td>
   <td>18</td>
   <td>Marketing</td>
   <td>50.000</td>
   <td>Female</td>
  </tr>
  <tr>
   <td>Mona</td>
   <td>21</td>
   <td>Marketing</td>
   <td>53.000</td>
   <td>Female</td>
  </tr>
  <tr>
   <td>Mike</td>
   <td>21</td>
   <td>Marketing</td>
   <td>53.000</td>
   <td>Male</td>
  </tr>
  <tr>
   <td>Mark</td>
   <td>25</td>
   <td>Production</td>
   <td>52.000</td>
   <td>Male</td>
  </tr>
  <tr>
   <td>Peter</td>
   <td>33</td>
   <td>Production</td>
   <td>55.000</td>
   <td>Male</td>
  </tr>
  <tr>
   <td>Jennifer</td>
   <td>24</td>
   <td>Production</td>
   <td>49.000</td>
   <td>Female</td>
  </tr>
  <tr>
   <td>David</td>
   <td>25</td>
   <td>Photography</td>
   <td>51.000</td>
   <td>Male</td>
  </tr>
  <tr>
   <td>Anna</td>
   <td>42</td>
   <td>Head of photography</td>
   <td>56.000</td>
  

相關文章

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.