Question

Here is nice piece of code that works fair in all browsers: http://www.imaputz.com/cssStuff/bigFourVersion.html

Since there are things that need to be computed for every particular table (extra space for scrollbar, fixed width for every cell), I’d like to create a javascript that modifies the table to make it scrollable.

Such scripts already exist, i.e. http://www.farinspace.com/jquery-scrollable-table-plugin/
but all of them need to specify the height of the table. I’d like to extract the height from CSS to make the script unobtrusive.

If I write the height as inline style, all browsers can read the table.style.height property. But when external style is used

<style>
  .scrollTable { display: block; overflow: hidden; height: 200px; }
</style>

only Firefox can read the offsetHeight/clientHeight property as expected. Other browsers can’t change table layout to block, I guess.

The only thing that I figured out is to read external CSS

function getCSS(rule,prop) {
  if(!(document && document.styleSheets)) return;
  var result="", ds = document.styleSheets;
  for(var i=0; i<ds.length; i++) {
    var r = getCSS1(ds[i],rule,prop);
    if(r) result = r;
  }
  return result;
}
function getCSS1(sheet,rule,prop) {
  var rules = sheet.cssRules? sheet.cssRules: sheet.rules;
  var result = "";
  for(var i=0; i<rules.length; i++) {
    var r = rules[i].selectorText.toLowerCase();
    if(r.indexOf(rule)==-1) continue;
    if(r.lastIndexOf(rule)!=r.length-rule.length) continue;
    var p = rules[i].style[prop];
    if(p) result = p;
  }
  return result;
}

var height = getCSS(".scrollTable","height");

But the height might be specified otherwise: by id, another class or inherited, so I am probably in wrong way. Is there any other way how to guess the table height? I am about to give up.

---

In short

I want this code

<script src="scrollTable.js"></script> // load the script
<style> .scrollTable { height: 200px; } // set the CSS
<table class="scrollTable">...</table> // script should do all the tricks

My script can do all the tricks except for get the table height. How to extract it?

Answer 1

Why not enclose the <table> in a <div>? This way you should be able to the get the <div> height even if it’s in an external CSS.