SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css - dynamic table - select

    Hello All,

    I'm using a dynamic table which contains drop down, text box. Drop down in a dynamic table when scrolled down goes above the header. How to avoid it ?

    Code:
    <div id="scroll-Table">
      <table border="1" rules="none" frame="box">
        <thead>
         <tr>
    <th>Column 1</th>
    <th>Column 2</th>
        </tr>
        </thead>
        <tbody>
         <tr>
    <td>
      <select size="1" id="name">
       <option>option 1</option>
               <option>option 2</option>
      </select> </td>
            <td>
      <input type="text" id="num" maxlength="6"/>
            </td>
        </tr> 
        <tr>
    <td>
      Henry
            </td>
            <td>
      12
            </td>
        </tr>
    <tr>
    <td>
      Henry
            </td>
            <td>
      12
            </td>
        </tr>
    <tr>
    <td>
      Henry
            </td>
            <td>
      12
            </td>
        </tr>
       </tbody>
    </table>
    
    CSS
    #scroll-Table {
    width: 150%;
    margin:0 auto;
    margin-left: 0%;
    overflow:auto;
    height:300px;
    }
    #scroll-Table table {
    width: 100%;
    }
    #scroll-Table table tbody {
    overflow:auto;
    }
    #scroll-Table thead tr {
    position:relative;
    top:expression(this.parentElement.parentElement.parentElement.scrollTop-2);
    }
    #scroll-Table tfoot tr {
    position:relative;
    bottom:expression(this.parentElement.parentElement.offsetHeight - this.parentElement.parentElement.parentElement.clientHeight - this.parentElement.parentElement.parentElement.scrollTop);
    }

    Thanks...

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I didn't quite understand the question and couldn't really tell from the code what you wanted but if you are talking about the select element being on top of other elements then there's not much you can do about it.

    The select is a windowed element in IE6 and under and is painted on top of everything else. It does not adhere to z-indexed and cannot be positioned within a stacking context.

    The only option to hide it is to use the "iframe shim" technique which is a little complicated.

    Apologies if you meant something else.

  3. #3
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Paul This is what I understood from his question. I assume he wants the select to start scrolling after 5* elements versus the default.

    *- random number
    Ryan B | My Blog | Twitter

  4. #4
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul ...

    You understood my question correctly.

    Thanks,
    SS...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •