用CSS固定HTML表头_用css和html做一个页面表头-CSDN博客

本文链接：https://blog.csdn.net/Lijun7788/article/details/6611640

最近研究固定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_r(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_r(this.offsetParent.scrollTop+this.offsetParent.clientHeight-this.offsetParent.scrollHeight);">
   <td>合计</td>
   <td>29</td>
   <td> </td>
   <td>63.000</td>
   <td> </td>
  </tr>
</table>
<script>
</script>
</div>
</BODY>
</HTML>

哈哈!在IE中没问题，到了Google就不行了，表头没有问题，表尾不行!!