Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have javascript that gets the width of a table and reduces the css fontsize of text within the table until the table width is less then the width of its parent div.

The code bellow shows the principle ONLY.

This approach works out side Wordpress. Within Wordpress the fontsize is reduced to 0px and the width of the table width shrinks, but remains wider than the width of its parent.

Outside wordpress the browser adjust the table width to fit the text.

So how does Wordpress handle HTML Tables different?

function ShrinkTable() {
var FontSize = parseInt($("#tbl").css('font-size').replace('px', ''),10);
var TabWidth = jQuery("#tbl").width();
var DivWidth = jQuery("#narrorColumn");
if (parseInt(DivWidth.css('width').replace('px', ''),10) <= TabWidth) {
    jQuery("#tbl").css('font-size', FontSize - 1 + 'px'); /* you can change 4 with any number, the smaller is better but it may require more loop */
    //Shrink the font while div width is less than table width
    ShrinkTable();
  }
}    
share|improve this question
1  
What happens if you replace parseInt($("#tbl") with parseInt(jQuery("#tbl")? –  toscho Jul 27 '12 at 18:28
    
Hi toscho the code was meant as quick illustration of the principal not actual code which uses jQuery to loop through all tables within the actual code all $ have been changed to jQuery. Thanx for looking –  Holly Jul 28 '12 at 10:39
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.