项目中设计的报表table设计的列数相对过多,当拖动下方的滚动条时无法对应表头所对应的列,因此在网上搜索了好一段日子,最后在网上找到了一些参考资料,然后总结归纳出兼容行列合并的固定表头demo。
多浏览器没有做太多测试,在ie6中已测试通过。
功能期待了很久今天终于找到解决的方式,总结到javaeye中方便日后查阅。实现方式可能还有更好的,希望有大牛路过,给我留点更好的实现例子作日后交流之用。
以下是相关的css
<style type="text/css">
<!--
body,table, td, a {font:9pt;}
/*重点:固定行头样式*/
.scrollRowThead{position: relative; left: expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft);z-index:0;}
/*重点:固定表头样式*/
.scrollColThead {position: relative;top: expression(this.parentElement.parentElement.parentElement.scrollTop);z-index:2;}
/*行列交叉的地方*/
.scrollCR { z-index:3;}
/*div外框*/
.scrollDiv {height:200px;clear: both; border: 1px solid #EEEEEE;OVERFLOW: scroll;width: 320px; }
/*行头居中*/
.scrollColThead td,.scrollColThead th{ text-align: center ;}
/*行头列头背景*/
.scrollRowThead,.scrollColThead td,.scrollColThead th{background-color:EEEEEE;}
/*表格的线*/
.scrolltable{border-bottom:1px solid #CCCCCC; border-right:1px solid #CCCCCC; }
/*单元格的线等*/
.scrolltable td,.scrollTable th{border-left: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; padding: 5px; }
.scrollTable thead th{background-color:#EEEEEE;font-weight:bold;position:relative;}
-->
</style>
以下是HTML
<h1>利用CSS代码让Table产生固定表头</h1>
<div id="scrollDiv" class="scrollDiv" >
<table border="0" cellpadding="3" cellspacing="0" width="500" class="scrollTable">
<thead>
<tr class="scrollColThead" >
<th class="scrollRowThead scrollCR" > </th>
<th colspan="2">列头</th>
<th colspan="2">列头</th>
<th rowspan="2">列头</th>
</tr>
<tr class="scrollColThead" >
<th class="scrollRowThead scrollCR" >h1</th>
<th >h2</th>
<th >h3</th>
<th >h4</th>
<th >h5</th>
</tr>
</thead>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox" value="checkbox">
a</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格5</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox2" value="checkbox">
b</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格5</td>
</tr>
<tr>
<td nowrap class="scrollRowThead" >
<input type="checkbox" name="checkbox3" value="checkbox">
c</td>
<td nowrap>单元格2</td>
<td nowrap>单元格3</td>
<td nowrap>单元格4</td>
<td nowrap>单元格5</td>
<td nowrap>单元格5</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox4" value="checkbox">
d</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格5</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox5" value="checkbox">
e</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格5</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox6" value="checkbox">
f</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格5</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox7" value="checkbox">
g</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格5</td>
</tr>
</table>
</div>
另外补充一点,如果在表头合并的是最后一行的时候,排版将出现问题。由于上面合并的只有两行,因此样式没有受到改变,如果要处理,暂时的解决办法就是不合并rowspan最后一行,将其多行显示,有点牵强,但找不到解决办法。类似情况如下图:
找了些资料可作参考:
http://www.loveayang.com.cn/post/2008/04/e59bbae5ae9ae8a1a8e5a4b4e79a84CSSe5ae9ee78eb0.aspx
文章中亦说没有办法解决上述的这个问题,留待日后有更好的解决方案。
- 大小: 10 KB
分享到:
相关推荐
在IT行业的前端开发中,使用CSS来固定表头或列是一项常见的需求,尤其是在处理大量数据时,这样的设计能显著提升用户体验。本文将深入探讨如何利用CSS实现这一功能,基于提供的HTML代码片段,我们将详细解析其背后的...
CSS控制table表头
CSS-固定表头,非常好使,可以在c#,asp,php等环境使用
在网页设计中,CSS(Cascading Style Sheets)是一种用于控制网页元素呈现方式的重要技术。在处理大型数据表格时,为了提高用户体验,我们常常需要实现固定表头和列的效果,这样用户在滚动页面时,表头和列标签始终...
div+css 固定表头和列div+css 固定表头和列
这通常涉及到计算表头距离顶部的距离,并将其设置为CSS的`top`属性值,确保表头始终固定在视口的顶部。 4. **兼容性和性能**:考虑到不同浏览器的兼容性问题,开发此类插件时,可能需要使用如jQuery等库来简化跨...
表头和列头的固定通常涉及到CSS(层叠样式表)的定位技巧。在H5中,可以利用`position`属性来实现这一效果。`position`属性有`static`、`relative`、`absolute`和`fixed`等值,其中`fixed`可以使元素相对于浏览器...
要实现GridView固定表头横向滚动纵向固定的功能,需要使用CSS样式来控制表头的位置。在样式中,我们可以使用position:relative;和top:expression(this.offsetParent.scrollTop);来使表头固定在屏幕上。 样式代码...
1. **CSS定位**:通过设置CSS的`position`属性为`absolute`或`fixed`,可以将表头固定在页面的特定位置。但是,这种方法需要精确计算表头和内容区域的相对位置,以避免滚动时出现重叠或错位。 2. **JavaScript监听...
### GridView固定表头纯CSS实现方法详解 在Web开发中,尤其是在处理大量数据展示时,GridView作为常用的控件之一,其功能强大且易于使用。然而,当数据量较大时,用户在滚动页面查看数据的过程中,可能会失去对列头...
总结来说,"js table固定表头,固定列,全浏览器兼容"这个主题涵盖的技术点包括:JavaScript事件监听、DOM操作、CSS定位技术、浏览器兼容性处理,以及可能的第三方库或插件的使用。实现这样的功能需要深入理解前端技术...
复杂表头固定行,固定列,纯css实现,样式可修改,可根据自己要求,更改表头,以及固定列的数量,本人亲测,确实好用
为了解决这个问题,我们可以利用CSS(Cascading Style Sheets)来实现表头和表列的固定,确保在滚动时始终保持可见。本文将详细介绍如何通过CSS实现这一功能,并解决rowspan导致的显示异常问题。 首先,我们需要...
固定表头的实现主要依赖CSS的定位属性。我们可以将`<thead>`设置为相对定位(position: relative),然后给它一个较大的z-index值,使其始终位于页面顶部。例如: ```css thead { position: fixed; top: 0; z-...
一种常见的方法是将表头部分独立出来,然后设置CSS样式使其相对于窗口或容器固定。以下是一个示例: ```html table { width: 100%; overflow-y: auto; } thead { position: sticky; top: 0; } <!-- .....
当然,固定表头的实现还可能会涉及一些其他因素,比如浏览器兼容性问题,但在大多数现代浏览器中,上述方法都是有效的。希望本文的介绍能够帮助到需要固定表格表头的开发者,实现更加友好和专业的产品。
3. **固定表头**:要实现固定表头,我们可以使用CSS样式来实现。通常,我们可以设置`position: fixed`给表头,然后通过调整`top`和`width`属性来确保其位置和宽度。同时,需要确保表体部分的滚动不影响表头,这可能...
在这个实例中,我们使用了GridView控件,并且使用了CSS样式来实现固定表头的效果。首先,我们需要设置th标签的position属性为relative,然后使用expression设置top属性为this.offsetParent.scrollTop,这样可以实现...
当我们需要展示复杂的数据结构,比如带有层次关系的表头时,多表头合并功能就显得尤为重要。本篇文章将深入探讨如何利用GridView实现多表头合并,以满足更精细的数据展示需求。 首先,理解多表头合并的基本概念。在...
- 表头固定:通过CSS将GridView的表头(`<thead>`)设置为`position: fixed`,并设置适当的宽度和高度,使其在页面上始终保持可见。同时,为了防止表头与数据行重叠,可以设置一个与表头相同高度的空白区域(如`...