使用CSS实现固定表头表列时，出现多行表头时的问题，请高手指点

lzhm 2008-04-23 04:35:23
请看一下我做的示例，

ID单元格的 rowspan = 2
ID列为固定列，当拖动左右滚动条时，ID的下半部分被遮挡住了。

请问各位高手有没有遇到过此问题，有没有较好的通用的解决办法。


<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

    <title>固定表头和列(多行表头)</title>

    <style>

        .FixedTitleRow

        {

            position: relative; 

            top: expression(this.offsetParent.scrollTop); 

            z-index: 10;

            background-color: #EEEEEE;

            border-bottom:1px solid #CCCCCC;

        }

        

        .FixedTitleColumn

        {

            position: relative; 

            left: expression(this.parentElement.offsetParent.scrollLeft);

            background-color:Lime;

        }

        

        .FixedDataColumn

        {

            position: relative;

            left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);

            background-color: #F7F7F7;

        }

    </style>

</head>

<body>

  <div id="scrollDiv" style="width: 600px; overflow: auto; cursor: default; display: inline;

        position: absolute; height: 200px;">

        <table id='tbUserDefined' cellpadding='0' cellspacing='0'

            style='table-layout: fixed; border-collapse:collapse;' bordercolor='#777777' border='1'>

            <tbody>

                

                <tr class="FixedTitleRow">

                    <td class="FixedTitleColumn" style="width:50px;">

                        Ctrl</td>

                    <td class="FixedTitleColumn" rowspan="2" style="width:50px;">

                        ID</td>

                    <td class="FixedTitleColumn" colspan="2" style="width:100px;">

                        Value</td>

                    <td colspan="2"  style="width:450px;">

                        Txt</td>

                    <td colspan="3"  style="width:450px;">

                        Txt</td>

               </tr>

                <tr class="FixedTitleRow">

                    <td class="FixedTitleColumn">

                         </td>

                    <td class="FixedTitleColumn">

                        Code</td>

                    <td class="FixedTitleColumn">

                        Text</td>

                    <td>

                        Txt1</td>

                    <td>

                        Txt2</td>

                    <td>

                        Txt3</td>

                    <td>

                        Txt4</td>

                    <td>

                        Txt5</td>

                </tr>

                <tr>

                    <td class="FixedDataColumn">

                         </td>

                    <td class="FixedDataColumn">

                        ID1</td>

                    <td class="FixedDataColumn">

                        Code1</td>

                    <td class="FixedDataColumn">

                        Text1</td>

                    <td>

                        88</td>

                    <td>

                        22</td>

                    <td>

                        22</td>

                    <td>

                        22</td>

                </tr>



            </tbody>

        

        </table>

    </div>



</body>

</html>
...全文
216 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
lzhm 2008-04-24
  • 打赏
  • 举报
 回复
非常感谢chinmo 的帮助，也多谢各位朋友的关注。问题解决
一把编程的菜刀 2008-04-24
  • 打赏
  • 举报
 回复
你的原封不动，我只加一个样式如下：
<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

    <title>固定表头和列(多行表头)</title>

    <style>

        .FixedTitleRow

        {

            position: relative; 

            top: expression(this.offsetParent.scrollTop); 

            z-index: 10;

            background-color: #EEEEEE;

            border-bottom:1px solid #CCCCCC;

        }

		.FixedTitleRow1

        {

            position: relative; 

            top: expression(this.offsetParent.scrollTop); 

            z-index: 9;

            background-color: #EEEEEE;

            border-bottom:1px solid #CCCCCC;

        }

        

        .FixedTitleColumn

        {

            position: relative; 

            left: expression(this.parentElement.offsetParent.scrollLeft);

            background-color:Lime;

        }

        

        .FixedDataColumn

        {

            position: relative;

            left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);

            background-color: #F7F7F7;

        }

    </style>

</head>

<body>

  <div id="scrollDiv" style="width: 600px; overflow: auto; cursor: default; display: inline;

        position: absolute; height: 200px;">

        <table id='tbUserDefined' cellpadding='0' cellspacing='0'

            style='table-layout: fixed; border-collapse:collapse;' bordercolor='#777777' border='1'>

            <tbody>

                

                <tr class="FixedTitleRow">

                    <td class="FixedTitleColumn"  style="width:50px;">

                        Ctrl</td>

                    <td class="FixedTitleColumn" rowspan="2" style="width:50px;">

                        ID</td>

                    <td class="FixedTitleColumn"  colspan="2" style="width:100px;">

                        Value</td>

                    <td colspan="2"  style="width:450px;">

                        Txt</td>

                    <td colspan="3"  style="width:450px;">

                        Txt</td>

               </tr>

                <tr class="FixedTitleRow1">

                    <td class="FixedTitleColumn"> 

                        </td>

                    <td class="FixedTitleColumn">

                        Code</td>

                    <td class="FixedTitleColumn">

                        Text</td>

                    <td>

                        Txt1</td>

                    <td>

                        Txt2</td>

                    <td>

                        Txt3</td>

                    <td>

                        Txt4</td>

                    <td>

                        Txt5</td>

                </tr>

                <tr>

                    <td class="FixedDataColumn"> 

                        </td>

                    <td class="FixedDataColumn">

                        ID1</td>

                    <td class="FixedDataColumn">

                        Code1</td>

                    <td class="FixedDataColumn">

                        Text1</td>

                    <td>

                        88</td>

                    <td>

                        22</td>

                    <td>

                        22</td>

                    <td>

                        22</td>

                </tr>



            </tbody>

        

        </table>

    </div>



</body>

</html>
一把编程的菜刀 2008-04-24
  • 打赏
  • 举报
 回复
要不你就加一个样式，这样就可以解决：
<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

    <title>固定表头和列(多行表头)</title>

    <style>

        .FixedTitleRow

        {

            position: relative; 

            top: expression(this.offsetParent.scrollTop); 

            z-index: 10;

            background-color: #EEEEEE;

            border-bottom:1px solid #CCCCCC;

        }

		.FixedTitleRow1

        {

            position: relative; 

            top: expression(this.offsetParent.scrollTop); 

            z-index: 9;

            background-color: #EEEEEE;

            border-bottom:1px solid #CCCCCC;

        }

        

        .FixedTitleColumn

        {

            position: relative; 

            left: expression(this.parentElement.offsetParent.scrollLeft);

            background-color:Lime;

        }

        

        .FixedDataColumn

        {

            position: relative;

            left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);

            background-color: #F7F7F7;

        }

    </style>

</head>

<body>

  <div id="scrollDiv" style="width: 600px; overflow: auto; cursor: default; display: inline;

        position: absolute; height: 200px;">

        <table id='tbUserDefined' cellpadding='0' cellspacing='0'

            style='table-layout: fixed; border-collapse:collapse;' bordercolor='#777777' border='1'>

            <tbody>

                

                <tr class="FixedTitleRow">

                    <td class="FixedTitleColumn" rowspan="2" style="width:50px;">

                        Ctrl</td>

                    <td class="FixedTitleColumn" rowspan="2" style="width:50px;">

                        ID</td>

                    <td class="FixedTitleColumn"  colspan="2" style="width:100px;">

                        Value</td>

                    <td colspan="2"  style="width:450px;">

                        Txt</td>

                    <td colspan="3"  style="width:450px;">

                        Txt</td>

               </tr>

                <tr class="FixedTitleRow1">

                    <td class="FixedTitleColumn"> 

                        </td>

                    <td class="FixedTitleColumn">

                        Code</td>

                    <td class="FixedTitleColumn">

                        Text</td>

                    <td>

                        Txt1</td>

                    <td>

                        Txt2</td>

                    <td>

                        Txt3</td>

                    <td>

                        Txt4</td>

                    <td>

                        Txt5</td>

                </tr>

                <tr>

                    <td class="FixedDataColumn"> 

                        </td>

                    <td class="FixedDataColumn">

                        ID1</td>

                    <td class="FixedDataColumn">

                        Code1</td>

                    <td class="FixedDataColumn">

                        Text1</td>

                    <td>

                        88</td>

                    <td>

                        22</td>

                    <td>

                        22</td>

                    <td>

                        22</td>

                </tr>



            </tbody>

        

        </table>

    </div>



</body>

</html>
一把编程的菜刀 2008-04-24
  • 打赏
  • 举报
 回复
还有你第二个 <tr class="FixedTitleRow">就不用再调用class="FixedTitleRow"了不然就遮住了第一个tr的
一把编程的菜刀 2008-04-24
  • 打赏
  • 举报
 回复
你这个问题是你的表格设计的问题，不是样式的问题
lzhm 2008-04-24
  • 打赏
  • 举报
 回复
chinmo 你好：
呵呵，多谢回复。我的示例就是你给的代码上演变而来，问题是，我的应用中出现了多行表头，且出现了rowspan=2的表头单元格，请看一下我第一个例子，拖动一下横向滚动条就明白我所说的不好解决的问题了。
lawrendc 2008-04-24
  • 打赏
  • 举报
 回复
学习.....
一把编程的菜刀 2008-04-24
  • 打赏
  • 举报
 回复
你的主要是在设计上有问题，
一把编程的菜刀 2008-04-24
  • 打赏
  • 举报
 回复
如果都要解决的话，我给你一个现成的例子：就不修改你的地方，其实你一看CSS样式和设计你就知道了怎么做了
<html><head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

    <title>固定表头和列</title>

    <style>



        .FixedTitleRow

        {

            position: relative; 

            top: expression(this.offsetParent.scrollTop); 

            z-index: 10;

            background-color: #E6ECF0;

        }

        

        .FixedTitleColumn

        {

            position: relative; 

            left: expression(this.parentElement.offsetParent.scrollLeft);

        }

        

        .FixedDataColumn

        {

            position: relative;

            left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);

            background-color: #E6ECF0;

        }

    

</style>

</head><body>

<div id="scrollDiv" style="width: 300px; overflow: auto; cursor: default; display: inline;

    position: absolute; height: 200px;">

    <table id='accountTable' width='500' height='230' cellpadding='0' cellspacing='0'

        style='table-layout: auto' bordercolor='lightgrey'>

    <tbody>

    <tr class="FixedTitleRow">

        <td class="FixedTitleColumn">ID0</td>

        <td class="FixedTitleColumn">CK0</td>

        <td class="FixedTitleColumn">Code0</td>

        <td class="FixedTitleColumn">Descirption0</td>

        <td class="FixedTitleColumn">TOL0</td>

        <td>XS0</td>

        <td>SS0</td>

        <td>MS0</td>

        <td>DS0</td>

        <td>BS0</td>

        <td>XL0</td>

        <td>ML0</td>

        <td>DL0</td>

        <td>EM0</td>

        <td>BM0</td>

    </tr><tr>

        <td class="FixedDataColumn">88</td>

        <td class="FixedDataColumn">88</td>

        <td class="FixedDataColumn">88</td>

        <td class="FixedDataColumn">88</td>

        <td class="FixedDataColumn">88</td>

        <td>22</td>

        <td>22</td>

        <td>22</td>

        <td>22</td>

        <td>22</td>

        <td>22</td>

        <td>22</td>

        <td>22</td>

        <td>22</td>

        <td>22</td>

    </tr><tr>

        <td class="FixedDataColumn">111</td>

        <td class="FixedDataColumn">111</td>

        <td class="FixedDataColumn">1111</td>

        <td class="FixedDataColumn">This is Test</td>

        <td class="FixedDataColumn">1</td>

        <td>001</td>

        <td>002</td>

        <td>003</td>

        <td>004</td>

        <td>005</td>

        <td>006</td>

        <td>007</td>

        <td>008</td>

        <td>009</td>

        <td>010</td>

    </tr><tr>

        <td class="FixedDataColumn">111</td>

        <td class="FixedDataColumn">111</td>

        <td class="FixedDataColumn">1111</td>

        <td class="FixedDataColumn">This is Test</td>

        <td class="FixedDataColumn">1</td>

        <td>001</td>

        <td>002</td>

        <td>003</td>

        <td>004</td>

        <td>005</td>

        <td>006</td>

        <td>007</td>

        <td>008</td>

        <td>009</td>

        <td>010</td>

    </tr><tr>

        <td class="FixedDataColumn">111</td>

        <td class="FixedDataColumn">111</td>

        <td class="FixedDataColumn">1111</td>

        <td class="FixedDataColumn">This is Test</td>

        <td class="FixedDataColumn">1</td>

        <td>001</td>

        <td>002</td>

        <td>003</td>

        <td>004</td>

        <td>005</td>

        <td>006</td>

        <td>007</td>

        <td>008</td>

        <td>009</td>

        <td>010</td>

    </tr>

    </tbody>

    </table>

</div>

</body></html>
一把编程的菜刀 2008-04-24
  • 打赏
  • 举报
 回复
你只是要解决水平的吗？如果是以上的就满足你了
jayflee 2008-04-24
  • 打赏
  • 举报
 回复
水平OK

但是上下滚动就没效果了。



<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

    <title>固定表头和列(多行表头)</title>

    <style>

        .FixedTitleRow

        {

            position: relative; 

            top: expression(this.offsetParent.scrollTop); 

            z-index: 10;

			background-color: #EEEEEE;

            border-bottom:1px solid #CCCCCC;

        }

        

        .FixedTitleColumn

        {

            position: relative; 

            left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);

            background-color:Lime;

        }

        

        .FixedDataColumn

        {

            position: relative;

            left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);

            background-color: #F7F7F7;

        }

    </style>

</head>

<body>

  <div id="scrollDiv" style="width: 600px; overflow: auto; cursor: default; display: inline;

        position: absolute; height: 200px;">

        <table id='tbUserDefined' cellpadding='0' cellspacing='0'

            style='table-layout: fixed; border-collapse:collapse;' bordercolor='#777777' border='1'>

            <tbody>

                

                <tr id="aa">

                    <td class="FixedTitleColumn" style="width:50px;">

                        Ctrl</td>

                    <td class="FixedTitleColumn" rowspan="2" style="width:50px;">

                        ID</td>

                    <td class="FixedTitleColumn" colspan="2" style="width:100px;">

                        Value</td>

                    <td colspan="2"  style="width:450px;">

                        Txt</td>

                    <td colspan="3"  style="width:450px;">

                        Txt</td>

               </tr>

                <tr id="bb">

                    <td class="FixedTitleColumn">

                         </td>

                    <td class="FixedTitleColumn">

                        Code</td>

                    <td class="FixedTitleColumn">

                        Text</td>

                    <td>

                        Txt1</td>

                    <td>

                        Txt2</td>

                    <td>

                        Txt3</td>

                    <td>

                        Txt4</td>

                    <td>

                        Txt5</td>

                </tr>

                <tr>

                    <td class="FixedDataColumn">

                         </td>

                    <td class="FixedDataColumn">

                        ID1</td>

                    <td class="FixedDataColumn">

                        Code1</td>

                    <td class="FixedDataColumn">

                        Text1</td>

                    <td>

                        88</td>

                    <td>

                        22</td>

                    <td>

                        22</td>

                    <td>

                        22</td>

                </tr>



            </tbody>

        

        </table>

    </div>



</body>

</html>
lzhm 2008-04-24
  • 打赏
  • 举报
 回复
确实如你所说，实现类似Excel的功能
可以实现左侧若干列的锁定，且多行表头也固定。
类似Google在线文档的表格，但是结构与他的不同
[Quote=引用 4 楼 chinmo 的回复:]
呵呵，还不是很清楚你的需求
[/Quote]
一把编程的菜刀 2008-04-24
  • 打赏
  • 举报
 回复
呵呵，还不是很清楚你的需求
lzhm 2008-04-23
  • 打赏
  • 举报
 回复
我们是想在目前现有的一个Grid控件上做一定的功能扩展，为了尽量上的影响现有控件的客户端事件，所以想通过这种方式来固定表头，和表列。
因为我们的Grid控件原先支持多行表头的显示，所以需要解决这个问题。

如果是在没有好的办法，可能就得做一堆div来蒙蔽了。。
一把编程的菜刀 2008-04-23
  • 打赏
  • 举报
 回复
你是想做成EXCEL那样的？
fastson 2008-04-23
  • 打赏
  • 举报
 回复
不会

^_^
JS写的GRID控件 ,多表头, 合并行单元格, 冻结列. 还算比较实用. (原创)
开发中一直用到各种样式的GRID. 每次都要花一些时间弄.... 固定的表头和冻结列其实是用4个表格实现的. 具体的实现代码我这里就不讲了. 有源码.主要讲下怎么使用.数据源是JSON格式 控件属性定义:...
HTML+CSS文档
HTML+CSS学习文档
网页设计（HTML+CSS+Div）学习笔记
记录个人的学习内容，学习路线，有不对的地方希望得到指点。 第一章 HTML和css的网页概述 第二章 从零开始构建HTML网页 第三章 使用CSS
关于用jquery 动态增加、删除表格的行，列操作。
jquery 动态增加、删除表格的行，列操作。
datagrid删除所有行卡住_easyui datagrid 多行删除问题
问题：var selected = $("#tbList").datagrid("getSelections");selected的选中项 会包含上次已删掉的选中项例子：比如list中有ArticleID的值1、2、3，删除1后，选中2、3继续删除，则selected包含了值1，导致出错。...
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章