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

我们是想在目前现有的一个Grid控件上做一定的功能扩展，为了尽量上的影响现有控件的客户端事件，所以想通过这种方式来固定表头，和表列。
因为我们的Grid控件原先支持多行表头的显示，所以需要解决这个问题。如果是在没有好的办法，可能就得做一堆div来蒙蔽了。。

解决方案 »

  1.   

    确实如你所说，实现类似Excel的功能
    可以实现左侧若干列的锁定，且多行表头也固定。
    类似Google在线文档的表格，但是结构与他的不同
      

  2.   

    水平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">
                            &nbsp;</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">
                            &nbsp;</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>
      

  3.   

    如果都要解决的话，我给你一个现成的例子：就不修改你的地方，其实你一看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>
      

  4.   

    chinmo 你好：
    呵呵，多谢回复。我的示例就是你给的代码上演变而来，问题是，我的应用中出现了多行表头，且出现了rowspan=2的表头单元格，请看一下我第一个例子，拖动一下横向滚动条就明白我所说的不好解决的问题了。
      

  5.   

    还有你第二个 <tr class="FixedTitleRow">就不用再调用class="FixedTitleRow"了不然就遮住了第一个tr的
      

  6.   

    要不你就加一个样式，这样就可以解决：
    <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">&nbsp;
                            </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">&nbsp;
                            </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>
      

  7.   

    你的原封不动，我只加一个样式如下：
    <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">&nbsp;
                            </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">&nbsp;
                            </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>
      

  8.   

    非常感谢chinmo 的帮助，也多谢各位朋友的关注。问题解决