Results 1 to 3 of 3

Thread: table cell padding values for chrome

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

    Default table cell padding values for chrome

    Hi,
    I am trying to get the table cell padding values via javascript. I can not seem to get the values for chrome. I am basically converting my regular tables into scrollable tables. Any help would be greatly appreciated.

    Below is my javascript code
    Code:
      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;
                    }
                 }
              }
              // I need the paddingLeft and paddingRight values but I can seem to get them. I need the api for paddingLeft and paddingRight
              headrow[i].style.width = ( (currentMax - headrow[i].style.paddingLeft - headrow[i].style.paddingRight) + "px");
    
              for (var j=0; j<tbody.rows.length; ++j) {
                 if(i < tbody.rows[j].cells.length ){
                     var currentCell = tbody.rows[j].cells[i];
    
                 // I need the paddingLeft and paddingRight values but can          
                 //seem to get them. I need the api for paddingLeft and paddingRight
                     var cellWidth = currentMax - currentCell.style.paddingLeft - currentCell.style.paddingRight;
                     tbody.rows[j].cells[i].style.width = ( cellWidth + "px");
                 }
              }
          }
    
          table.style.width = (table.offsetWidth + "px");
          tbody.style.display='block';
          tbody.style.overflow='auto';
          thead.style.display='block';
      },

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    What browser(s) does it work in?

    It would help a lot if you could give us a typical table that this would be applied to, including any styles that apply to that table. Or, better yet, give us a link to a page that demonstrates this.

    In general, for best results, I would advise you to use only inline css style (no attributes other than the inline style attribute, and no stylesheets) in constructing and styling your tables and their child elements, and only javascript detection and manipulation of css style in evaluating and transforming the tables and their child elements. This will cut down on ambiguities. The fact that table cells can at times expand when their content exceeds the space alloted may still be an issue.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    Default I had to set minWidth

    I had to set the min-width for chrome.
    I have always had an issue with scrollable tables.
    I have posted my solution below.

    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 used 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.

    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);
    }

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
  •