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就不行了,表头没有问题,表尾不行!!希望有高手给解决一下

  • 相关阅读:
    【leetcode】Letter Combinations of a Phone Number
    【leetcode】_3sum_closest
    【leetcode】_3Sum
    【LeetCode】Longest Common Prefix
    入门:PHP:hello world!
    入门:HTML:hello world!
    入门:HTML表单与Java 后台交互(复选框提交)
    codeforces 712B. Memory and Trident
    codeforces 712A. Memory and Crow
    hdu 5878 I Count Two Three (2016 ACM/ICPC Asia Regional Qingdao Online 1001)
  • 原文地址:https://www.cnblogs.com/analyzer/p/1299132.html
Copyright © 2011-2022 走看看