`
superfofo
  • 浏览: 129810 次
  • 性别: 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控制table表头

    CSS控制table表头

    CSS-固定表头,非常好使

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

    CSS 固定表头和列

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

    div+css 固定表头和列

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

    固定table表头的插件

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

    h5 固定表头及列头demo

    表头和列头的固定通常涉及到CSS(层叠样式表)的定位技巧。在H5中,可以利用`position`属性来实现这一效果。`position`属性有`static`、`relative`、`absolute`和`fixed`等值,其中`fixed`可以使元素相对于浏览器...

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

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

    固定表头的DataGrid

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

    GridView固定表头(不用javascript只用CSS!,很好用

    ### GridView固定表头纯CSS实现方法详解 在Web开发中,尤其是在处理大量数据展示时,GridView作为常用的控件之一,其功能强大且易于使用。然而,当数据量较大时,用户在滚动页面查看数据的过程中,可能会失去对列头...

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

    总结来说,"js table固定表头,固定列,全浏览器兼容"这个主题涵盖的技术点包括:JavaScript事件监听、DOM操作、CSS定位技术、浏览器兼容性处理,以及可能的第三方库或插件的使用。实现这样的功能需要深入理解前端技术...

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

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

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

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

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

    固定表头的实现主要依赖CSS的定位属性。我们可以将`&lt;thead&gt;`设置为相对定位(position: relative),然后给它一个较大的z-index值,使其始终位于页面顶部。例如: ```css thead { position: fixed; top: 0; z-...

    html table 固定表头和列

    一种常见的方法是将表头部分独立出来,然后设置CSS样式使其相对于窗口或容器固定。以下是一个示例: ```html table { width: 100%; overflow-y: auto; } thead { position: sticky; top: 0; } &lt;!-- .....

    html Table 表头固定的实现

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

    vue表格实现固定表头首列

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

    gridview固定表头的一个实例

    在这个实例中,我们使用了GridView控件,并且使用了CSS样式来实现固定表头的效果。首先,我们需要设置th标签的position属性为relative,然后使用expression设置top属性为this.offsetParent.scrollTop,这样可以实现...

    GridView实现多表头合并

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

    GridView 固定表头和列

    - 表头固定:通过CSS将GridView的表头(`&lt;thead&gt;`)设置为`position: fixed`,并设置适当的宽度和高度,使其在页面上始终保持可见。同时,为了防止表头与数据行重叠,可以设置一个与表头相同高度的空白区域(如`...

Global site tag (gtag.js) - Google Analytics