ถามปัญหาการ fixed header ของตาราง ค่ะ

มีปัญหาในการทำ fixed header ของตารางในกรณีที่ข้อมูลในตารางเป็น dropdown list เวลาเลื่อน Scrollbar แล้วมันจะขึ้นไปทับหัวของตารางหน่ะค่ะ  แต่ถ้าเป็น object อื่นเช่น textbox หรือ ข้อความธรรมดาจะไม่เป็นอะไร มันจะเป็นปัญหาเฉพาะตัว dropdownlist หน่ะค่ะ รบกวนด้วยค่ะ  (ปัญหาตามภาพค่ะ)

นี่เป็น code ค่ะ

<html>
<head>
<meta http-equiv="Content-Language" content="th">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<title>Test Fixed header</title>
<style>
<!-- Scrollbar -->
div#content {
    border: 0px;
 width:100%;  
 height:100%; 
    font-family: Tahoma, MS Sans Serif;
    font-size: 10pt;
 color:#000000;
 margin: 0 auto;
 overflow: auto;
    margin-top: 0px;
 scrollbar-base-color: rgb(234,242,255);
 scrollbar-arrow-color: #336699;
 scrollbar-track-color:  white;

 scrollbar-shadow-color: rgb(120,172,255);
 scrollbar-lightshadow-color: rgb(120,172,255);
 scrollbar-darkshadow-color: gray;

 scrollbar-highlight-color: white;
 scrollbar-3dlight-color: rgb(120,172,255);

}
div.tableContainer10 {
   width: 100%;   
   height: 100%;  
   position:absolute;
   overflow-x: auto;
   overflow-y: auto;
   margin: 0 auto;
   overflow: auto;
   margin-top: 0px;
   }
  
  thead th, thead th.locked {
  position:relative;
  cursor: default;
  background:#A6CEF7;
  text-align:center;
  
  color:#000000
  }
  
  thead th {
  
  top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop);
  z-index: 20;

  }
 
  /* To provide fixed columns in freeze headers will be display first */
  thead th.locked {z-index: 30;}
 
  /* To provide fixed columns */
  td.locked,  th.locked{
     left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft-1); /* IE5+ only */
     position: relative;
     z-index: 10;
     font-family:  MS Sans Serif;
     font-size:14px;
     color:#000000;
     background-color:#FFFFFF;
   border-bottom:1px solid #6666FF;
   border-left:1px solid #6666FF;
   padding:.2em .2em;
 
  }


</style>

<body>
<form name="form1" method="post" action="">
<div id="content" style="height:200"><div class="tableContainer10" id="data1">
<table border="1" class="blue" width="100" align="center">
    <thead>
     <tr>
   <th rowspan="6"   class="locked">header1</th>
       <th rowspan="6"   class="locked">header2</th>
     </tr>
 </thead>
     <tr><td><input type="text" value="test" /></td><td><select name="select"><option value="">test</option></select></td></tr>
  <tr><td><input type="text" value="test" /></td><td><select name="select"><option value="">test</option></select></td></tr>
  <tr><td><input type="text" value="test" /></td><td><select name="select"><option value="">test</option></select></td></tr>
  <tr><td><input type="text" value="test" /></td><td><select name="select"><option value="">test</option></select></td></tr>
  <tr><td><input type="text" value="test" /></td><td><select name="select"><option value="">test</option></select></td></tr>
  <tr><td><input type="text" value="test" /></td><td><select name="select"><option value="">test</option></select></td></tr>
  <tr><td><input type="text" value="test" /></td><td><select name="select"><option value="">test</option></select></td></tr>
  <tr><td><input type="text" value="test" /></td><td><select name="select"><option value="">test</option></select></td></tr>
  <tr><td><input type="text" value="test" /></td><td><select name="select"><option value="">test</option></select></td></tr>
  <tr><td><input type="text" value="test" /></td><td><select name="select"><option value="">test</option></select></td></tr>
  <tr><td><input type="text" value="test" /></td><td><select name="select"><option value="">test</option></select></td></tr>
  <tr><td><input type="text" value="test" /></td><td><select name="select"><option value="">test</option></select></td></tr>
  <tr><td><input type="text" value="test" /></td><td><select name="select"><option value="">test</option></select></td></tr>
  <tr><td><input type="text" value="test" /></td><td><select name="select"><option value="">test</option></select></td></tr>
  <tr><td><input type="text" value="test" /></td><td><select name="select"><option value="">test</option></select></td></tr>
    </table>

</div></div>
 </form>
</body>
</html>    
    
   

 

05 เม.ย. 2553 เวลา 12:13 น. 3 3,300
^