#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    676
    Rep Power
    7

    Get TBODY of table to scroll


    Originally, I made a seperate line of headers, then below that made a table within <DIV>'s, and had that scroll. My issue now is make the headers sort column onClick. To do this, I can't have them 2 seperate items. Sorting works fine, but the TBODY portion I wish to only be like 500px tall, and not the whole page. How would I do this?

    Kinda an idea of my goal:

    Code:
    <TABLE>
      <THEAD>
        <TR>
          <TD>...</TD>  <-- Multiple headers to SIT STILL and allowing clicking to sort
        </TR>
      </THEAD>
      <TBODY>
        <TR>
          <TD>...</TD>  <-- A thousand or so rows to list, and keep in a scrollable 500px tall area
        </TR>
      </TBODY>
    </TABLE>
    As far as my sorting, it is in place and successful, but not designed for a scrolling area.

    http://www.kryogenix.org/code/browser/sorttable/

    EDIT: I did try placing the TBODY in its own DIV and get that to display as desired, but no luck. I currently have the whole table within my DIV which does stand the 500px tall and is scrollable. Just gotta get the HEADERS somehow locked.
    Last edited by Triple_Nothing; February 13th, 2013 at 06:31 PM.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    26
    Rep Power
    0
    I've found an implementation of what you're looking for at: http://www.cssplay.co.uk/menu/tablescroll.html

    The author has graciously allowed the reuse of his code, with attribution, and you can learn more about it from his website ... but I'll delve into the reasons why his solution works here.

    The table is wrapped in two divs, .outer and .innera. Those divs have the following properties:

    .outer:
    css Code:
    .outer {
    position:relative;
    padding:4em 0 3em 0;
    width:54em;
    background:#eee;
    margin:0 auto 3em auto;
    }


    .innera:
    css Code:
    .innera {
    overflow:auto;
    width:54em;
    height:9.6em;
    background:#eee;
    }


    Now this is the important bit which enables his solution; each TR within a THEAD has the following styles applied to it:

    css Code:
    .outer thead tr {
    position:absolute;
    top:1.5em;
    height:1.5em;
    left:0;
    }


    What this is doing is the following: specify a height for the div containing the table via the .inner class (height:9.6em;), and force the contents of that div to be scrollable (overflow: auto;).

    Now, were you to just implement the overflow: auto; on a div with a specified height wrapped around your table, the entire table - headers and all - would scroll. This is where relative/absolute positioning come into play...

    Since the .outer class uses relative positioning (position: relative;), any element within it can be absolutely positioned (position: absolute;). An absolutely positioned element stays put. It does not scroll: it sticks to whatever geometry you assign it.

    So, when the author specifies (top:1.5em; left:0;) it means this: "Force all of the TR's within THEAD tags under the .outer class to absolutely position themselves 0px from the left edge of the containing div, and 1.5em from the top."

    Ergo the entire table still scrolls as discussed before, the only difference now is that you've told the THEAD's to stay put at a certain location regardless of scrolling, thereby achieving the result you're aiming for.

    - Null
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    676
    Rep Power
    7
    Excellent! After minimal tampering with, all works excellent EXCEPT.....

    The first row now seems to be rather independant, and so does its sizing in column width. Will I need to manually define widths for each column, or is there a way for it to hold matching widths as the rest?


    EDIT: Actually, first row is fine now. After the defining the THEAD and TBODY, I forgot to add in the class attribute. Now the cells in THEAD hold correct widths, but not the rest. My table-layout is 'fixed', so the rest of the columns are equally spaced. Anyone know how to adjust columns as desired?
    Last edited by Triple_Nothing; February 13th, 2013 at 08:08 PM.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    26
    Rep Power
    0
    Originally Posted by Triple_Nothing
    Will I need to manually define widths for each column, or is there a way for it to hold matching widths as the rest?
    I'm not sure what your code looks like since you've implemented the changes, but to steal from the linked example's source once again:

    html Code:
    <thead>
      <tr>
        <th scope="col">FLIGHT CODE</th> 
        <th scope="col">FROM</th> 
        <th scope="col">STA</th> 
        <th scope="col">ETA</th> 
        <th scope="col" class="nd">Notes</th> 
      </tr>
    </thead>


    Note that the author is using <TH> tags with scope="col" specified instead of <TD> tags.

    You can read more about TH tags and the scope attribute here: https://developer.mozilla.org/en-US/...ML_Elements/th

    - Null
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    676
    Rep Power
    7
    I've tried many things. It seems the thing getting me stuck is the table-layout: fixed;

    If I remove it, table expands as wide as needed to fit all content in its cell, which is not desired. If I replace it, and don't detatch the header as we've done, every column has the desired width. Once we pull the THEAD and TBODY apart, the THEAD has desired widths, but the TBODY has even widths. i.e. Table width is 1000px w/ 5 columns, so every col is 200px.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    676
    Rep Power
    7
    I removed class/id atts from the td/th tags to define widths, and inserted <colgroup><col> items to define width. They were placed after the TABLE tag, and adjust width desireably on TBODY columns, but not THEAD. :-/ Any ideas with this one?

IMN logo majestic logo threadwatch logo seochat tools logo