用CSS固定HTML表头(转)

最新推荐文章于 2025-08-11 22:30:00 发布

linfeng_yan

最新推荐文章于 2025-08-11 22:30:00 发布

阅读量584

点赞数

CC 4.0 BY-SA版权

分类专栏： web 文章标签： html css border google table ie

本文链接：https://blog.youkuaiyun.com/linfeng_yan/article/details/3735735

web 专栏收录该内容

6 篇文章

订阅专栏

本文描述了一个HTML表格在不同浏览器中的显示问题，特别是表头和表尾的定位问题，在IE浏览器中能够正常显示，但在Google Chrome中出现问题。作者寻求有关如何在所有浏览器中保持一致性的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
   <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> </td>
   <td>63.000</td>
   <td> </td>
  </tr>
</table>
<script>
</script>
</div>
</BODY>
</HTML>