Question

I would appreciate some help or suggestions with my current project.

I have a simple webpage with an html form where a database is queried and the results return various rows and columns into a table.

What I need the table to do is maximize the size of text in the table cells. The tables CELL size should be even, but the text in the cell be as large as possible.

I’ve tried jQuery BigText and jTextFill, but they both seem to depend on a fixed width/height. As each database query returns various number of rows / columns, I can’t set a fixed width/height as it would not maximize the screen with a small table result.

Answer 1

Just finished this. It uses jQuery mostly for convenience/compatibility. Turns your HTML table into an expanding width font table.

http://jsfiddle.net/fnbrb/1/

Here it is after some more fiddling. Maybe this works better:
http://jsfiddle.net/xXHLc/11/

Here is the JS but it requires a few styles as well:

    jQuery("#expandable-font-table TD").each(function()
    {
        // need to set up the DIVs and TDs first
        var jTd = jQuery(this);
        var jDiv = jTd.find("DIV");
        jDiv.width(jTd.width()+"px"); //set the DIV's width to it's parent TD
        jTd.width(jTd.width()+"px"); //set the width of the TD so the table doesn't get confused
    });

    jQuery("#expandable-font-table TD DIV").each(function()
    {
        // get each DIV in the table and maximize it's font size
        var jDiv = jQuery(this);
        this.style.visibility="hidden"; // hide while resizing
        var fontSize = jDiv.css("font-size"); // current default font size
        fontSize = fontSize.substring(0,fontSize.length-2);
        // loop while DIV is still within it's original width
        while(this.scrollWidth <= this.clientWidth)
        {
            fontSize++;
            this.style.fontSize = fontSize+"px";
        }
        this.style.fontSize = (fontSize-1)+"px";
        this.style.visibility="visible";        
    });