A-AA+then

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

3,271

มีปัญหาในการทำ 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>    
    
   

 

3 ความคิดเห็น

ไม่รู้ว่าจะทำอะไรนะ แต่วิธีนี้ไม่น่าจะได้ผล

ลองเอาแนวคิดไปประยุต์ดู

หลักการที่ควรจะเป็น ก็คือ ใส่ scrollbar ให้กับส่วนกรอบของ input เท่านั้นครับ

<form name="form1" method="post" action="">
<table style="width:300px"><tr><th>Col1</th><th>Col2</th></tr></table>
<div style="width:300px;height:200px;overflow:auto;float:none">
<table>
  <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>
 </form>

ไปดัดแปลงต่อเอาเอง ผมเขียนตัวอย่างให้คร่าวๆตามแนวคิด
1

  ขอบคุณมากๆ ค่า
 
แต่ว่าเนื่องจาก header กะ ข้อมูลที่แสดงมันคนละ table กัน มันจะมีปัญหาว่า บางที querey ข้อมูลมาแสดงในตาราง แล้วมันยาวเกิน page ไปทางด้านขวา จนต้องมี scrollbar ด้านล่าง (แล้วแต่ข้อมูล)  ถึงแม้จะกำหนดขนาด width ให้กับ header และ ข้อมูลอีกตารางให้มันเท่ากัน มันก็ทำได้ยาก ถึงทำได้ มันก็จะเพี้ยนไม่ตรงกันเป๊ะๆ อ่ะค่ะ >.<  มันจะเยื้องๆกัน

2

จริงๆแล้ว ไม่ลองกำหนดความกว้างของตารางทั้ง 2 คอลัมน์ให้มีขนาดคงที่ ดูละครับ มันจะได้ไม่แปรตามขนาดข้อความ
3
^