项目中设计的报表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-固定表头,非常好使,可以在c#,asp,php等环境使用
在网页设计中,CSS(Cascading Style Sheets)是一种用于控制网页元素呈现方式的重要技术。在处理大型数据表格时,为了提高用户体验,我们常常需要实现固定表头和列的效果,这样用户在滚动页面时,表头和列标签始终...
标题"div+css固定表头的"指的是如何利用这种技术在长表格中使表头在滚动时始终保持可见。这种效果在大数据量的表格中非常有用,因为它允许用户在浏览数据时始终能看到列标题,从而更好地理解表格内容。 固定表头的...
1. **CSS定位**:使用`position: fixed`或`position: absolute`来固定表头和列。 2. **JavaScript事件监听**:使用`addEventListener`来监听滚动事件,计算滚动距离,并相应地更新元素的样式。 3. **响应式设计**:...
在这个例子中,它应该包含了表格元素(`<table>`)、表头(`<thead>`)、表体(`<tbody>`)以及其他必要的HTML标记,这些标记会被CSS和JavaScript控制以实现固定表头的效果。 3. `script.js`:这是JavaScript文件,...
CSS固定表头代码 对table的表头利用css进行固定
这通常涉及到计算表头距离顶部的距离,并将其设置为CSS的`top`属性值,确保表头始终固定在视口的顶部。 4. **兼容性和性能**:考虑到不同浏览器的兼容性问题,开发此类插件时,可能需要使用如jQuery等库来简化跨...
表头和列头的固定通常涉及到CSS(层叠样式表)的定位技巧。在H5中,可以利用`position`属性来实现这一效果。`position`属性有`static`、`relative`、`absolute`和`fixed`等值,其中`fixed`可以使元素相对于浏览器...
要实现GridView固定表头横向滚动纵向固定的功能,需要使用CSS样式来控制表头的位置。在样式中,我们可以使用position:relative;和top:expression(this.offsetParent.scrollTop);来使表头固定在屏幕上。 样式代码...
复杂表头固定行,固定列,纯css实现,样式可修改,可根据自己要求,更改表头,以及固定列的数量,本人亲测,确实好用
为了解决这个问题,我们可以利用CSS(Cascading Style Sheets)来实现表头和表列的固定,确保在滚动时始终保持可见。本文将详细介绍如何通过CSS实现这一功能,并解决rowspan导致的显示异常问题。 首先,我们需要...
6. **兼容性考虑**:不同的浏览器对CSS某些特性的支持程度不同,因此在编写CSS代码时,需要考虑跨浏览器兼容性,可以使用 autoprefixer 这样的工具自动添加必要的浏览器前缀,或者采用渐进增强的策略,确保在不支持...
例如,表头和第一列可以分别放在单独的表格中,然后通过CSS和JavaScript来控制它们的位置和显示。这种方法需要精确计算表格的大小和位置,以避免在滚动时出现重叠或错位。 在实际项目中,可以使用现成的库,如...
当然,固定表头的实现还可能会涉及一些其他因素,比如浏览器兼容性问题,但在大多数现代浏览器中,上述方法都是有效的。希望本文的介绍能够帮助到需要固定表格表头的开发者,实现更加友好和专业的产品。
3. **固定表头**:要实现固定表头,我们可以使用CSS样式来实现。通常,我们可以设置`position: fixed`给表头,然后通过调整`top`和`width`属性来确保其位置和宽度。同时,需要确保表体部分的滚动不影响表头,这可能...
在这个实例中,我们使用了GridView控件,并且使用了CSS样式来实现固定表头的效果。首先,我们需要设置th标签的position属性为relative,然后使用expression设置top属性为this.offsetParent.scrollTop,这样可以实现...
GridView 多表头实现与表头合并、分组 GridView 是一个常用的数据网格控件,但是在实际开发中,我们经常会遇到需要实现多表头、表头合并、表头分组等需求。今天,我们将探讨如何实现 GridView 多表头、表头合并、...
当我们需要展示复杂的数据结构,比如带有层次关系的表头时,多表头合并功能就显得尤为重要。本篇文章将深入探讨如何利用GridView实现多表头合并,以满足更精细的数据展示需求。 首先,理解多表头合并的基本概念。在...
锁定表头及固定左边列,原生JS原创代码 需要注意的问题: 1.表格的宽度以及表格每一列的宽度需要固定(特殊情况除外:当表格列数少并且表格总宽度明显小于表格父容器的宽度时,也就是表格列不存在自动换行的问题) 2...