表格固定表头

求助！求助！求助！求助！求助！求助！求助！求助！求助！求助！求助！
表头三行 
第一行 有多个列合并
第二行和第三行有单元格行合并和列合并  
现在网上查了很多资料但都实现不了
如下列代码：有表头单元格合并就不好用了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
<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>   </HEAD> <BODY>
<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>   </BODY>
</HTML>

解决方案 »

  1.   

     我的处理方法是用两个table然后指定每个table的td的宽度.
    --------------------------------------帅签分割线-------------------------------------------------
      

  2.   

    这样？<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html lang="cn">
    <head>
    <title>table固定行列</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style type="text/css">
    body{margin:0px;padding :0px;font-size:12px;font-family:宋体,verdana,Arial, Helvetica;}

    /*body{margin:0px;padding :0px;font-size:12px;font-family:宋体,verdana,Arial, Helvetica;}*/
    /*
    div 滚动条样式
    */
    div{ scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-face-color: #d9d9d9; scrollbar-3dlight-color: #d9d9d9; scrollbar-darkshadow-color: #d9d9d9; scrollbar-track-color: #ffffff,cheap ugg; scrollbar-arrow-color: #ffffff}
    /*--容器样式--*/
    .container{width:98%;margin-right: auto;margin-left: auto;}
    /*--左侧样式--*/
    .leftPanel{float:left;width:30%;overflow:hidden;border-top:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000;}
    /*--右侧样式--*/
    .rightPanel{float:left;width:69.8%;border-top:1px solid #000;border-bottom:1px solid #000; border-right:#000 solid 1px;}
    /*--左侧内容容器样式--*/
    .leftContent{height:250px;overflow-y:hidden;overflow-x:scroll;}
    /*--左侧title宽度--*/
    .leftTitle{width:100%;margin-bottom:1px;}
    .container table{border-collapse:collapse;border-spacing:0px; width:100%; border:#000 solid 0px;}
    .container table th{background-image:url(images/title_bg.gif);background-color:#93C3A5;color:#777;border:#000 solid 1px; font-size:12px;white-space:nowrap; height:22px; border-top:0px;border-left:0px;}
    /*--右侧table宽度--*/
    .rightPanel table{width:1800px;}
    /*--右侧title宽度多20+px 方便滚动条显示--*/
    .rightTitle {width:1820px;margin-bottom:1px;}
    /*--右侧包涵标题容器样式--*/
    .rightTop{width:100%;overflow:hidden;}
    /*--右侧内容容器样式--*/
    .rightContent{width:100%; height:250px; background:#fff; overflow-x:scroll;overflow-y:auto;}
    /*table td{background:#fff;text-align:center; border:#000 solid 1px;border-left:0px;height:18px;}*/
    .container table td{text-align:center; border:#000 solid 1px;border-left:0px;height:18px;word-break:break-all;white-space:none;}
    .leftContent table tr{cursor:pointer;}
    </style>

    <script type="text/javascript">
    function jscroll()
    {
    document.getElementById("leftContent").scrollTop = document.getElementById("rightContent").scrollTop;
    document.getElementById("rightTop").scrollLeft = document.getElementById("rightContent").scrollLeft;
    }
    </script>
    </head>
    <body>

    <div class="container">
    <h4 align="center">DEMO</h4>
    <!--左侧，固定列-->
    <div class="leftPanel">
    <div class="leftTitle">
    <table>
    <tr rowspan="2" height="60px">
    <th width="40%">固定列a</th>
    <th width="60%">固定列b</th>
    </tr>
    </table>
    </div>
    <div class="leftContent" id="leftContent">
    <table>
    <tr>
    <td width="40%">1</td>
    <td width="60%">2</td>
    </tr>
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    </table>
    </div>
    </div>
    <!-- 右侧 -->
    <div class="rightPanel">
    <div class="rightTop" id="rightTop">
    <div class="rightTitle">
    <table>
    <tr height="30px">
    <th colspan="2" width="20%">非固定1</th>
    <th colspan="2" width="20%">非固定2</th>
    <th colspan="2" width="20%">非固定3</th>
    <th colspan="2" width="20%">非固定4</th>
    <th colspan="2" width="20%">非固定5</th>
    </tr>
    <tr height="30px">
    <th width="10%">非固定A</th>
    <th width="10%">非固定B</th>
    <th width="10%">非固定C</th>
    <th width="10%">非固定D</th>
    <th width="10%">非固定E</th>
    <th width="10%">非固定F</th>
    <th width="10%">非固定G</th>
    <th width="10%">非固定H</th>
    <th width="10%">非固定I</th>
    <th width="10%">非固定J</th>
    </tr>
    </table>
    </div>
    </div>

    <div class="rightContent" id="rightContent" onscroll="jscroll()">
    <table>
    <tr>
    <td width="10%">1</td>
    <td width="10%">1</td>
    <td width="10%">1</td>
    <td width="10%">1</td>
    <td width="10%">1</td>
    <td width="10%">1</td>
    <td width="10%">1</td>
    <td width="10%">1</td>
    <td width="10%">1</td>
    <td width="10%">1</td>
    </tr>
    <tr>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    </tr>
    <tr>
    <td>3</td>
    <td>3</td>
    <td>3</td>
    <td>3</td>
    <td>3</td>
    <td>3</td>
    <td>3</td>
    <td>3</td>
    <td>3</td>
    <td>3</td>
    </tr>
    <tr>
    <td>4</td>
    <td>4</td>
    <td>4</td>
    <td>4</td>
    <td>4</td>
    <td>4</td>
    <td>4</td>
    <td>4</td>
    <td>4</td>
    <td>4</td>
    </tr>
    <tr>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    </tr>
    <tr>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    </tr>
    <tr>
    <td>7</td>
    <td>7</td>
    <td>7</td>
    <td>7</td>
    <td>7</td>
    <td>7</td>
    <td>7</td>
    <td>7</td>
    <td>7</td>
    <td>7</td>
    </tr>
    <tr>
    <td>8</td>
    <td>8</td>
    <td>8</td>
    <td>8</td>
    <td>8</td>
    <td>8</td>
    <td>8</td>
    <td>8</td>
    <td>8</td>
    <td>8</td>
    </tr>
    <tr>
    <td>9</td>
    <td>9</td>
    <td>9</td>
    <td>9</td>
    <td>9</td>
    <td>9</td>
    <td>9</td>
    <td>9</td>
    <td>9</td>
    <td>9</td>
    </tr>
    <tr>
    <td>10</td>
    <td>10</td>
    <td>10</td>
    <td>10</td>
    <td>10</td>
    <td>10</td>
    <td>10</td>
    <td>10</td>
    <td>10</td>
    <td>10</td>
    </tr>
    <tr>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    </tr>
    <tr>
    <td>12</td>
    <td>12</td>
    <td>12</td>
    <td>12</td>
    <td>12</td>
    <td>12</td>
    <td>12</td>
    <td>12</td>
    <td>12</td>
    <td>12</td>
    </tr>
    <tr>
    <td>13</td>
    <td>13</td>
    <td>13</td>
    <td>13</td>
    <td>13</td>
    <td>13</td>
    <td>13</td>
    <td>13</td>
    <td>13</td>
    <td>13</td>
    </tr>
    <tr>
    <td>14</td>
    <td>14</td>
    <td>14</td>
    <td>14</td>
    <td>14</td>
    <td>14</td>
    <td>14</td>
    <td>14</td>
    <td>14</td>
    <td>14</td>
    </tr>
    <tr>
    <td>15</td>
    <td>15</td>
    <td>15</td>
    <td>15</td>
    <td>15</td>
    <td>15</td>
    <td>15</td>
    <td>15</td>
    <td>15</td>
    <td>15</td>
    </tr>
    <tr>
    <td>16</td>
    <td>16</td>
    <td>16</td>
    <td>16</td>
    <td>16</td>
    <td>16</td>
    <td>16</td>
    <td>16</td>
    <td>16</td>
    <td>16</td>
    </tr>
    <tr>
    <td>17</td>
    <td>17</td>
    <td>17</td>
    <td>17</td>
    <td>17</td>
    <td>17</td>
    <td>17</td>
    <td>17</td>
    <td>17</td>
    <td>17</td>
    </tr>
    <tr>
    <td>18</td>
    <td>18</td>
    <td>18</td>
    <td>18</td>
    <td>18</td>
    <td>18</td>
    <td>18</td>
    <td>18</td>
    <td>18</td>
    <td>18</td>
    </tr>
    <tr>
    <td>19</td>
    <td>19</td>
    <td>19</td>
    <td>19</td>
    <td>19</td>
    <td>19</td>
    <td>19</td>
    <td>19</td>
    <td>19</td>
    <td>19</td>
    </tr>
    <tr>
    <td>20</td>
    <td>20</td>
    <td>20</td>
    <td>20</td>
    <td>20</td>
    <td>20</td>
    <td>20</td>
    <td>20</td>
    <td>20</td>
    <td>20</td>
    </tr>
    </table>
    </div>
    </div>
    </div>
    </body>
    </html>