`
guohf
  • 浏览: 417869 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

HTML固定表头Table

HTMLIEXHTML 
阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
</head>
<style>
table{border:1px solid #00ccdf;}
#text{position:fixed;background-color:#00ff00 ;}
*+html #text {background-color:red;position:relative;top:expression(this.offsetParent.scrollTop);}

</style>
<body>
<div style="height: 250px; overflow: auto;padding:-8px;">
<table border=0 cellpadding="0" cellspacing="0">
    <tr id="text">
        <th>
            head        </th>
    </tr>   
<tr><td>dddd</td></tr>
<tr><td>dddd</td></tr>
<tr><td>dddd</td></tr>
<tr><td>dddd</td></tr><tr><td>dddd</td></tr><tr><td>dddd</td></tr><tr><td>dddd</td></tr><tr><td>dddd</td></tr><tr><td>dddd</td></tr><tr><td>dddd</td></tr>
<tr>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>dddd</td>
</tr>
</table>
</div>


</body>

</html>

如果有一些空隙   使用padding 调节。在IE中也可以 top:expression(this.offsetParent.scrollTop-2)这样调节。

 

转,只能IE

<html>
<head><title></title></head>
<style>
.ListTableF {
 border:1px solid #8EC2E6;
 border-collapse:collapse;
 BORDER-BOTTOM: medium none;
     BORDER-LEFT: medium none;
     BORDER-RIGHT: medium none;
     BORDER-TOP: medium none;
     margin-top:-1px;
     margin-left:-1px;
     margin-right:-1px;
}
.fixedDiv{
 overflow:auto;
 height:expression(document.body.clientHeight-240);
 width:expression(800);
 BORDER-BOTTOM: #94B6E6 1pt solid;
    BORDER-LEFT: #94B6E6 1pt solid;
     BORDER-RIGHT: #94B6E6 1pt solid;
     BORDER-TOP: #94B6E6 1pt solid ;
 overflow-x:scroll;
}
.fixedHeaderTr {
 position:relative;
 top:expression(this.offsetParent.scrollTop);
 z-index:20;
}
.fixedHeaderTd {
 position:relative;
 left:expression(this.offsetParent.scrollLeft);
 z-index:10;
}
.TableRow {
 background-repeat:repeat;
 background-position : center left;
 BACKGROUND-COLOR: #AEC2E6;
 font-size: 12px; 
 BORDER-BOTTOM: #94B6E6 1pt solid;
 BORDER-LEFT: #94B6E6 1pt solid;
 BORDER-RIGHT: #94B6E6 1pt solid;
 BORDER-TOP: #94B6E6 1pt solid;
 height:22;
 font-weight: bold; 
 valign:middle;
}
.TableRow1 {
 left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
 position: relative;
 BACKGROUND-COLOR: #AEC2E6;
 font-size: 12px; 
 BORDER-BOTTOM: #94B6E6 1pt solid;
 BORDER-LEFT: #94B6E6 1pt solid;
 BORDER-RIGHT: #94B6E6 1pt solid;
 BORDER-TOP: #94B6E6 1pt solid;
 height:22;
 font-weight: bold; 
 valign:middle;
 z-index:10;
}
.TableRow2 {
 left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
 position: relative;
 background-repeat:repeat;
 background-position : center left;
 BACKGROUND-COLOR: #AEC2E6;
 font-size: 12px; 
 BORDER-BOTTOM: #94B6E6 1pt solid;
 BORDER-LEFT: #94B6E6 1pt solid;
 BORDER-RIGHT: #94B6E6 1pt solid;
 BORDER-TOP: #94B6E6 1pt solid;
 height:22;
 font-weight: bold; 
 valign:middle;
 z-index:30;
}
.RecordRow {
 border: inset 1px #94B6E6;
 BORDER-BOTTOM: #94B6E6 1pt solid;
 BORDER-LEFT: #94B6E6 1pt solid;
 BORDER-RIGHT: #94B6E6 1pt solid;
 BORDER-TOP: #94B6E6 1pt solid;
 font-size: 12px;
 border-collapse:collapse;
 height:22;
}    
</style>
<body>
<div class="fixedDiv">
<table width="1000" border="0" cellspacing="0"  align="center" cellpadding="0"  
class="ListTableF">
 <tr class="fixedHeaderTr">
  <td align="center" width="125" class="TableRow2">第一列</td>
  <td align="center" width="125" class="TableRow">第二列</td>
  <td align="center" width="125" class="TableRow">第三列</td>
  <td align="center" width="125" class="TableRow">第四列</td>
  <td align="center" width="125" class="TableRow">第五列</td>
  <td align="center" width="125" class="TableRow">第六列</td>
  <td align="center" width="125" class="TableRow">第七列</td>
  <td align="center" width="125" class="TableRow">第八列</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第一行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第二行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第三行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第四行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第五行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第六行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第七行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第八行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第九行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第十行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第十一行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第十二行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第十三行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第十四行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第十五行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第十六行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第十七行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第十八行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第十九行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第二十行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第二十一行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第二十二行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第二十三行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
 <tr>
  <td align="center" class="TableRow1">第二十四行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
 </tr>
</table> 
</body>
</html>
分享到：
| CSS经典技巧20条总结
评论
1 楼 头子 2013-01-11  
中间那段关于“空隙”的解决方式很赞
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    html Table 表头固定的实现

    总的来说，通过上述方法，可以较为简单地实现一个固定表头的HTML表格，这个技术在现代网页设计中非常实用，能够提升用户体验，特别是在需要处理大量表格数据时。当然，固定表头的实现还可能会涉及一些其他因素，比如...

    html table 固定表头和列

    "html table 固定表头和列"这个主题就是关于如何在滚动时使HTML表格的表头（thead）和第一列（或列组）始终保持可见。 一、HTML表格基础 在HTML中，`&lt;table&gt;`元素用于创建表格，`&lt;tr&gt;`定义表格行，`&lt;th&gt;`定义表头...

    固定表头table

    ### 固定表头Table知识点详解 #### 一、固定表头Table概念 在数据分析、报表展示等场景中，表格（Table）是非常常见且重要的数据展现形式。而在大量的数据面前，用户滚动查看时往往会遇到一个问题：随着页面的滚动...

    移动端table固定表头与固定第一列

    总结起来，实现移动端table的固定表头与固定第一列，主要涉及HTML5的表格结构、CSS的定位和层叠上下文以及可能的JavaScript滚动事件处理。通过这些技术，我们能够在移动端提供更好的数据浏览体验。

    固定table表头的插件

    在实际应用中，"golovko-Fixed-Header-Table-aa40378"插件可能提供了更高级的功能，如自定义样式、滚动平滑效果、多列固定等，使得固定表头的实现更加灵活和强大。开发者可以通过解压并查看压缩包中的文件，学习其...

    asp.net html+table固定表头和左侧列.rar

    在这个“asp.net html+table固定表头和左侧列.rar”压缩包中，我们聚焦的是如何在HTML表格（Table）中实现固定表头（Fixed Header）和左侧列（Fixed Left Column）的功能，以便在用户滚动页面时，这些关键信息始终...

    HTML Table固定表头完美实现

    本篇文章将探讨如何通过HTML、CSS以及JavaScript技术，实现HTML表格的固定表头效果，使得在滚动时表头始终保持可见。 首先，我们来创建一个基本的HTML表格结构。在HTML文件中，我们可以这样编写： ```html &lt;!...

    移动web table固定表头第一列.rar

    "移动web table固定表头第一列.rar"这个压缩包文件显然是为了解决这些问题，提供了一种在移动端实现固定表头和第一列的解决方案。下面将详细讲解如何在HTML5和CSS3环境下实现这样的功能。 首先，我们需要创建一个...

    table的表头固定

    在网页设计中，"table的表头固定"是一种常见的需求，尤其在展示大量数据时，保持表头在页面滚动时始终可见，可以帮助用户更好地理解数据列的含义。...通过不断优化和调整，我们可以创建出既美观又实用的固定表头表格。

    基于jquery的固定html table表头/列头插件

    总结来说，"jquery.fixedtable.js"是一个实用的jQuery插件，旨在提升网页中大型表格的用户体验，通过固定表头和列头，使得数据浏览更加方便。它具有良好的浏览器兼容性，且易于集成到现有项目中。开发者可以根据自身...

    JavaScript:固定table的表头

    总之，固定表头的实现是一个典型的前端交互功能，它涉及到HTML布局、CSS样式控制以及JavaScript事件处理等多个方面的知识。熟练掌握这一技能，不仅可以提升用户体验，也有助于深化对前端开发的理解。

    Table 固定表头插件

    为了解决这个问题，"Table 固定表头插件"应运而生，它使得在滚动查看长表格内容时，表头能够始终保持可见，便于用户定位和理解数据。 固定表头插件（Fixed Header Table）是Web开发中的一个实用工具，主要应用于...

    网页table固定表头示例

    在网页设计中，数据展示经常使用到表格（Table），尤其是数据量大时，为了方便用户浏览，固定表头成为一种常见的需求。固定表头可以使用户在滚动页面时始终保持表头可见，以便清楚地知道每一列对应的数据含义。本文...

    实现Table表头和列固定

    需要注意的是，实现固定表头和列的过程中，可能会遇到浏览器兼容性问题，尤其是对于较老的浏览器。因此，需要确保CSS和JavaScript代码经过充分测试，确保在主流浏览器上正常工作。 总的来说，实现Table表头和列固定...

    html 表头固定及列固定

    例如，对于移动设备，可能只固定表头而不固定列；对于大屏幕，可以同时固定表头和一列或多列。可以通过媒体查询（Media Queries）实现响应式设计，或者提供用户切换不同固定模式的选项。 总的来说，实现“html 表头...

    vue表格实现固定表头首列

    在Vue移动端项目中，开发人员经常遇到需要创建具备固定表头和首列的表格，以提供良好的用户体验。本文将详细讲解如何在不依赖任何UI框架或插件的情况下，利用Vue的核心特性实现这样一个功能。 首先，我们需要理解...

    table固定表头和指定列

    在压缩包文件"表格（固定表头、固定列）"中，可能包含了示例代码、HTML文件、CSS样式表和JavaScript脚本，用于演示如何实现这个功能。通过学习和分析这些文件，你可以了解到具体的实现细节，包括如何设置CSS规则，...

    复杂表头固定表头和列.html

    复杂表头固定行，固定列，纯css实现，样式可修改，可根据自己要求，更改表头，以及固定列的数量，本人亲测，确实好用

    Jquery table固定表头,固定列,全浏览器兼容

    下面我们将深入探讨如何使用 jQuery 和相关的 CSS 技术来创建一个具有固定表头和固定列的表格，并确保全浏览器兼容。 首先，jQuery 是一个强大的 JavaScript 库，它简化了 DOM 操作、事件处理、动画和Ajax交互。在...

    分享一个首行表头和最左列和最右列固定中间滚动的html table样式

    一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列...

Magicbox
Global site tag (gtag.js) - Google Analytics