浏览 9950 次
锁定老帖子 主题:css控制固定表头,兼容行列合并
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2010-02-02
最后修改:2010-02-02
多浏览器没有做太多测试,在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 文章中亦说没有办法解决上述的这个问题,留待日后有更好的解决方案。 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2010-02-03
不喜欢用expression
|
|
返回顶楼 | |
发表时间:2010-02-03
ecside不是好吗?
|
|
返回顶楼 | |
发表时间:2010-02-04
Ie only
|
|
返回顶楼 | |
发表时间:2010-02-08
劝楼主不要用expression,在Firefox下是不兼容的,而且expression会影响性能
|
|
返回顶楼 | |
发表时间:2010-02-09
是的,在firefox中确实存在问题,但需要功能实现,没有找到更好的解决方案,所以才先用的,望有使用过的童鞋介绍更好的办法
|
|
返回顶楼 | |
发表时间:2010-02-09
kaki 写道 ecside不是好吗?
ecside貌似不能合并表头之类的设置吧? |
|
返回顶楼 | |