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