zoukankan      html  css  js  c++  java
  • 转:用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就不行了,表头没有问题,表尾不行!!希望有高手给解决一下

  • 相关阅读:
    Python运维开发之路《WEB框架:Django》
    Python运维开发之路《函数进阶》
    Python运维开发之路《编程》
    Python运维开发之路《模块》
    Linux系统运维之Web服务器Nginx安装
    Python运维开发之路《高阶函数》
    Python运维开发之路《函数》
    <读书笔记>软件调试之道 :实证方法
    (知识分享)软硬件调试九法:第九条规则 如果你不修复一个bug,它将永远 存在
    (知识分享)软硬件调试九法:第八条规则 求助他人, 获得全新观点
  • 原文地址:https://www.cnblogs.com/analyzer/p/1299132.html
Copyright © 2011-2022 走看看