Results 1 to 6 of 6

Thread: scrollable tables

  1. #1
    Join Date
    Dec 2009
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default scrollable tables

    I have always had an issue with Scrollable tables. Here is my solutions.
    Here was my criteria.
    1) Don't define or set the column width.
    2) Set the tbody max height via css selector.
    3) Shrink the tbody.
    4) Use unobtrusive Javascript. Basically set a css class --> scrollable. I managed to almost solve this. I did use a wrapper table/div.
    5) Get it work for IE7, IE8, chrome, safari, opera and firefox.

    I would love to hear any feedback on improvements.

    Steve
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
        <head>
            <title>scroll</title>
            <meta http-equiv="X-UA-Compatible" content="IE=7" />
            <link href="css/tablescroll.css" rel="stylesheet" type="text/css"/>
            <!--[if IE]>
            <link href="css/tablescroll-ie.css" rel="stylesheet" type="text/css"/>
            <![endif]-->
            <script type="text/javascript" src="js/tablescroll.js"></script>
        </head>
        <body>
        <table class="scrollable"><tr><td><div>
        <table border="1"> 
            <thead style="background-color:white">
                 <tr>
                      <th style="text-align:left">One</th>
                      <th style="text-align:left">Two</th>
                      <th class="scrollCol"></th>
                 </tr>
            </thead>
            <tbody style="height:100px">
                <tr><td>Data</td><td><span style="white-space:nowrap">Dasdfsdfssdfssssssssssssssssssssssssssssssssfsdffffff   ffffffffffffsdfsdfsdfdstasdffffffffffffffffffffffff</span></td></tr>
                <tr><td>Data</td><td><input type="text" size="100"/></td></tr>
                <tr><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td></tr>
            </tbody>
        </table>
        </div></td></tr></table>
        </body>
    </html>
    css/tablescroll.css
    Code:
    /* set the tbody height for mozilla */
    html>body table.scrollable tbody {
        overflow: auto;
    }
    
    /* set scrollbar column for mozilla */
    table.scrollable th.scrollCol {
        display: block;
        width: 16px;
        min-width: 16px;
        padding: 0;
        margin: 0;
    }
    css/tablescroll-ie.css
    Code:
    /* for ie set the tbody height */
    table.scrollable div {
        height:expression( this.getElementsByTagName('TABLE')[0].clientHeight >= parseInt(this.getElementsByTagName('TBODY')[0].style.height) && parseInt(this.getElementsByTagName('TBODY')[0].style.height) > 0 ? this.getElementsByTagName('TBODY')[0].style.height : "auto" );  
        overflow-y: auto;
    }
    
    /* for ie set the table row height */
    table.scrollable table tr {
        height: auto;
    }
    
    /* for ie set the table header position */
    table.scrollable thead tr {
        position: relative;
        /* set the header for IE header (jumping header bug) */
        top: expression( this.parentNode.parentNode.parentNode.scrollTop + 'px' );   
    }
    
    /* reset for ie */
    table.scrollable th.scrollCol {
        display: none;
    }
    js/tablescroll.js
    Code:
    var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
    var is_safari = /WebKit/i.test(navigator.userAgent);
    var is_opera = navigator.userAgent.toLowerCase().indexOf('opera') > -1;
    
    tablescroll = {
    
      makeScrollable: function(table) {
          var tbody = table.getElementsByTagName('tbody')[0];
          var thead = table.getElementsByTagName('thead')[0];
          var headrow = thead.rows[0].cells;
    
          for (var i=0; i<headrow.length; ++i) {
              var currentMax = headrow[i].offsetWidth;
    
              for (var j=0; j<tbody.rows.length; ++j) {
                 if(i < tbody.rows[j].cells.length ){
                    var currentCell = tbody.rows[j].cells[i];
                    if( currentCell.offsetWidth > currentMax ){
                        currentMax = currentCell.offsetWidth;
                    }
                 }
              }
    
              headrow[i].style.width = (currentMax + "px");
              headrow[i].style.minWidth = (currentMax + "px");
    
              for (var j=0; j<tbody.rows.length; ++j) {
                 if(i < tbody.rows[j].cells.length ){
                     tbody.rows[j].cells[i].style.width = (currentMax + "px");
                     tbody.rows[j].cells[i].style.minWidth = (currentMax + "px");
                 }
              }
          }
          tbody.style.display='block';
          tbody.style.overflowY='auto';
          thead.style.display='block';
      },
    
      init: function(reinit) {
    
        // quit if this function has already been called
        if (reinit == true); // do nothing
        else if (arguments.callee.done) return;
        // flag this function so we don't do the same thing twice
        arguments.callee.done = true;
        if (!document.createElement || !document.getElementsByTagName) return;
        var tables = document.getElementsByTagName('table');
    
        if (tables) for (i=0;i<tables.length;++i) {
           var table = tables[i];
           if (table.className.search(/\bscrollable\b/) != -1) {
               var innerTable = table.getElementsByTagName('table')[0];
               var tbody = innerTable.getElementsByTagName('tbody')[0];
               // it is the second tbody
               if( parseInt(tbody.style.height) >= tbody.scrollHeight ) tbody.style.height="auto";
               else if(is_chrome || is_safari || is_opera)  tablescroll.makeScrollable(innerTable);
           }
        }
      },
    
      reinit: function() {
           tablescroll.init(true);
      }
    }
    
    /* for Mozilla/Opera9/chrome */
    if (window.addEventListener) {
        window.addEventListener("load", tablescroll.init, false);
    }
    
    /* for Safari */
    if (/WebKit/i.test(navigator.userAgent)) { // sniff
        var _timer = setInterval(function() {
            if (/loaded|complete/.test(document.readyState)) {
                tablescroll.init(); // call the onload handler
            }
        }, 10);
    }

  2. #2
    Join Date
    Jul 2008
    Posts
    128
    Thanks
    0
    Thanked 17 Times in 16 Posts

    Default

    Presumably you have a live demo?

  3. #3
    Join Date
    Dec 2009
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default scrollable table

    You can check it out via my dev. The ip address should not change for a while.
    http://69.249.249.134/testscroll.html

  4. #4
    Join Date
    Jul 2008
    Posts
    128
    Thanks
    0
    Thanked 17 Times in 16 Posts

    Default

    Doesn't load.

  5. #5
    Join Date
    Dec 2009
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Ip address is being blocked?
    What browser?
    You can always build it from my example.

    Steve

  6. #6
    Join Date
    Jun 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Scrollable tables for jQuery

    Steve -

    Works really well, and seems relatively simple. How about a jquery version of this code?

    - D

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
  •