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

nimari

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

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>

กรกฎ วิริยะ

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

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

หลักการที่ควรจะเป็น ก็คือ ใส่ 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>

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

nimari

ขอบคุณมากๆ ค่า

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

กรกฎ วิริยะ

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