`
superfofo
  • 浏览: 130139 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

css控制固定表头,兼容行列合并

    博客分类:
  • HTML
阅读更多
项目中设计的报表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"  >&nbsp;</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
分享到:
评论
6 楼 superfofo 2010-02-09  
kaki 写道
ecside不是好吗?


ecside貌似不能合并表头之类的设置吧?
5 楼 superfofo 2010-02-09  
是的,在firefox中确实存在问题,但需要功能实现,没有找到更好的解决方案,所以才先用的,望有使用过的童鞋介绍更好的办法
4 楼 javaqiang 2010-02-08  
劝楼主不要用expression,在Firefox下是不兼容的,而且expression会影响性能
3 楼 simoncz 2010-02-04  
Ie only
2 楼 kaki 2010-02-03  
ecside不是好吗?
1 楼 xyztony1985 2010-02-03  
不喜欢用expression

相关推荐

    用css样式固定表头和列

    在IT行业的前端开发中,使用CSS来固定表头或列是一项常见的需求,尤其是在处理大量数据时,这样的设计能显著提升用户体验。本文将深入探讨如何利用CSS实现这一功能,基于提供的HTML代码片段,我们将详细解析其背后的...

    CSS-固定表头,非常好使

    CSS-固定表头,非常好使,可以在c#,asp,php等环境使用

    CSS 固定表头和列

    在网页设计中,CSS(Cascading Style Sheets)是一种用于控制网页元素呈现方式的重要技术。在处理大型数据表格时,为了提高用户体验,我们常常需要实现固定表头和列的效果,这样用户在滚动页面时,表头和列标签始终...

    css固定表头和第一列

    css和html固定表头和第一列,可上下拖动和左右拖动

    div+css 固定表头和列

    div+css 固定表头和列div+css 固定表头和列

    div+css固定表头的

    标题"div+css固定表头的"指的是如何利用这种技术在长表格中使表头在滚动时始终保持可见。这种效果在大数据量的表格中非常有用,因为它允许用户在浏览数据时始终能看到列标题,从而更好地理解表格内容。 固定表头的...

    一个兼容IE、Chrome和Firfox的HTML固定表头例子

    在这个例子中,它应该包含了表格元素(`&lt;table&gt;`)、表头(`&lt;thead&gt;`)、表体(`&lt;tbody&gt;`)以及其他必要的HTML标记,这些标记会被CSS和JavaScript控制以实现固定表头的效果。 3. `script.js`:这是JavaScript文件,...

    固定table表头的插件

    这通常涉及到计算表头距离顶部的距离,并将其设置为CSS的`top`属性值,确保表头始终固定在视口的顶部。 4. **兼容性和性能**:考虑到不同浏览器的兼容性问题,开发此类插件时,可能需要使用如jQuery等库来简化跨...

    gridview固定表头 横向滚动 纵向固定

    要实现GridView固定表头横向滚动纵向固定的功能,需要使用CSS样式来控制表头的位置。在样式中,我们可以使用position:relative;和top:expression(this.offsetParent.scrollTop);来使表头固定在屏幕上。 样式代码...

    固定表头的DataGrid

    1. **CSS定位**:通过设置CSS的`position`属性为`absolute`或`fixed`,可以将表头固定在页面的特定位置。但是,这种方法需要精确计算表头和内容区域的相对位置,以避免滚动时出现重叠或错位。 2. **JavaScript监听...

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

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

    通过css固定表头和表列通过css固定表头和表列

    为了解决这个问题,我们可以利用CSS(Cascading Style Sheets)来实现表头和表列的固定,确保在滚动时始终保持可见。本文将详细介绍如何通过CSS实现这一功能,并解决rowspan导致的显示异常问题。 首先,我们需要...

    CSS实现多表头悬浮

    6. **兼容性考虑**:不同的浏览器对CSS某些特性的支持程度不同,因此在编写CSS代码时,需要考虑跨浏览器兼容性,可以使用 autoprefixer 这样的工具自动添加必要的浏览器前缀,或者采用渐进增强的策略,确保在不支持...

    html锁定表头冻结行列兼容多浏览器

    例如,表头和第一列可以分别放在单独的表格中,然后通过CSS和JavaScript来控制它们的位置和显示。这种方法需要精确计算表格的大小和位置,以避免在滚动时出现重叠或错位。 在实际项目中,可以使用现成的库,如...

    JS固定表头和左边列V2.0(源码)

    锁定表头及固定左边列,原生JS原创代码 需要注意的问题: 1.表格的宽度以及表格每一列的宽度需要固定(特殊情况除外:当表格列数少并且表格总宽度明显小于表格父容器的宽度时,也就是表格列不存在自动换行的问题) 2...

    实现GridView多表头,表头合并,表头分组,支持多行

    GridView 多表头实现与表头合并、分组 GridView 是一个常用的数据网格控件,但是在实际开发中,我们经常会遇到需要实现多表头、表头合并、表头分组等需求。今天,我们将探讨如何实现 GridView 多表头、表头合并、...

    html Table 表头固定的实现

    当然,固定表头的实现还可能会涉及一些其他因素,比如浏览器兼容性问题,但在大多数现代浏览器中,上述方法都是有效的。希望本文的介绍能够帮助到需要固定表格表头的开发者,实现更加友好和专业的产品。

    vue表格实现固定表头首列

    3. **固定表头**:要实现固定表头,我们可以使用CSS样式来实现。通常,我们可以设置`position: fixed`给表头,然后通过调整`top`和`width`属性来确保其位置和宽度。同时,需要确保表体部分的滚动不影响表头,这可能...

    GridView实现多表头合并

    当我们需要展示复杂的数据结构,比如带有层次关系的表头时,多表头合并功能就显得尤为重要。本篇文章将深入探讨如何利用GridView实现多表头合并,以满足更精细的数据展示需求。 首先,理解多表头合并的基本概念。在...

    DataGrid固定表头

    1. CSS样式:通过CSS定位技术,可以实现表头与内容区域的分离,当内容区域滚动时,表头部分保持固定。例如,可以使用`position: fixed`或`position: sticky`属性来实现。然而,这种方法可能需要精确的布局计算,对...

Global site tag (gtag.js) - Google Analytics