"Streatching"

by RichieHindle

HTML

<div id='measure'><span>Pog</span></div>
<table class='report-layout-table'>
<tr class='guide'>
<td class='guide-cell-0'><span>0</span></td>
<td class='guide-cell-1'><span>1</span></td>
<td class='guide-cell-2'><span>2</span></td>
<td class='guide-cell-3'><span>3</span></td>
</tr>
<tr>
<td><span>www</span></td>
<td><span>1</span></td>
<td><span>2</span></td>
<td><span>3</span></td>
</tr>
</table>

CSS

.report-layout-table {
    table-layout: fixed;
    width: 1px;
}

.report-layout-table td {
    padding: 0;
    margin: 0;
    white-space: nowrap;
    font-family: arial, swiss, helvetica;
}

.report-layout-table tr.guide span {
    font-size: 4pt;
}

#measure {
    position: absolute;
    left: -1000px;
    width: 900px;
}

JavaScript

var widths = [];
for (var i = 0; i < 4; i++) {
    widths[i] = 1;
}

var measure_span = $('#measure span');
$('.report-layout-table').each(function(i, table) {
    var guide_tr = $('.guide', table);
    $('tr', table).each(function(i, tr) {
        if (tr.className != 'guide') {
            $('td', tr).each(function(i, e) {
                td = $(e);
                measure_span.text($('span', td).text());
                var cell_width = measure_span.width();
                //console.log(cell_width + ", " + td.width());
                if (cell_width > widths[i]) {
                    //$('.guide-cell-'+i, guide_tr).width(cell_width);
                    widths[i] = cell_width;
                }
            });
        }
    });

    $.map(widths, function (width, i) {
        $('.guide-cell-'+i, guide_tr).width(width);
    });
});