Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hot to have Static Table Header<THEAD> with Dynamic Scrollable Table Contents ..?

    hi,

    how can i get a static header with scrollable table, the table contents will be populated based on the selected value.
    the result might contain any number of table rows, my requirement is even after scrolling the table rows the table header should remain static.

    is ther any simple way to acheive this..?, coz al my coding is done without having static header.

    thnx
    Murali.

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    620
    Thanks
    1
    Thanked 20 Times in 20 Posts
    Code:
        <style type="text/css">
          /*<![CDATA[*/
            .ScrollTable-container {
              display: table-cell;
            }
            .ScrollTable thead tr {
              position: relative;
            }
            .ScrollTable tbody {
              overflow: auto;
            }
            .ScrollTable tbody tr {
              height: auto;
            }
            .ScrollTable tbody tr td:last-child {
              padding-right: 20px;
            }
          /*]]>*/
        </style>
    <!--[if IE]>
        <style type="text/css">
          /*<![CDATA[*/
            .ScrollTable {
              overflow-y: auto;
              width: 1px;
            }
          /*]]>*/
        </style>
    <![endif]-->
    
    
    
    <div class="ScrollTable-container">
      <div class="ScrollTable" style="height: 200px;">
        <table border="1" cellspacing="2" cellpadding="2">
          <thead>
            <tr>
              <th colspan="2">People in My Group</th>
            </tr>
            <tr>
              <th>Name</th>
              <th>Relationship</th>
            </tr>
          </thead>
          <tbody style="height: 135px;">
            <tr>
              <td align="left">me</td>
              <td align="left">of course!</td>
            </tr>
            <tr>
              <td align="left">George</td>
              <td align="left">imaginary friend</td>
            </tr>
            <tr>
              <td align="left">Daryl</td>
              <td align="left">my brother</td>
            </tr>
            <tr>
              <td align="left">Daryl</td>
              <td align="left">my other brother</td>
            </tr>
            <tr><td>Co 1</td><td>a co-worker</td></tr>
            <tr><td>Co 2</td><td>a co-worker</td></tr>
            <tr><td>Co 3</td><td>a co-worker</td></tr>
            <tr><td>Co 4</td><td>a co-worker</td></tr>
            <tr><td>Co 5</td><td>a co-worker</td></tr>
            <tr><td>Co 6</td><td>a co-worker</td></tr>
            <tr><td>Co 7</td><td>a co-worker</td></tr>
            <tr><td>Co 8</td><td>a co-worker</td></tr>
            <tr><td>Co 9</td><td>a co-worker</td></tr>
          </tbody>
        </table>
      </div>
    </div>


  •  

    Posting Permissions

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