• 转:用CSS固定HTML表头


    转自: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;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>
       <td>Female</td>
      </tr>
      <tr>
       <td>Rita</td>
       <td>30</td>
       <td>Photography</td>
       <td>54.000</td>
       <td>Female</td>
      </tr>
      <tr>
       <td>Magnus</td>
       <td>25</td>
       <td>Freelancer</td>
       <td>65.000</td>
       <td>Male</td>
      </tr>
      <tr>
       <td>Johnny</td>
       <td>29</td>
       <td>Freelancer</td>
       <td>63.000</td>
       <td>Male</td>
      </tr>
      <tr id="foot" height="20" style="background-color:green;color:white;position:relative;top:expression(this.offsetParent.scrollTop+this.offsetParent.clientHeight-this.offsetParent.scrollHeight);">
       <td>合计</td>
       <td>29</td>
       <td>&nbsp;</td>
       <td>63.000</td>
       <td>&nbsp;</td>
      </tr>
    </table>
    <script>
    </script>
    </div>
    </BODY>
    </HTML>

     

    哈哈!在IE中没问题,到了Google就不行了,表头没有问题,表尾不行!!希望有高手给解决一下

  • 相关阅读:
    存储过程!
    声卡: 不同的声音,声卡进阶应用技巧集(zz)
    VMware虚拟机的移植性……
    终于挤进前五十了,呵呵
    水源九周年庆:)
    Windows Malicious Software Removal Tool
    听教授谈论文
    VMware虚拟机文件整理和压缩
    弄了一整天的VMWare
    倒霉!倒霉!
  • 原文地址:https://www.cnblogs.com/analyzer/p/1299132.html
Copyright © 2020-2023  润新知