Yuriy Galanter Yuriy Galanter - 1 month ago 8
HTML Question

Autosize HTML table cell height based on content when rowspan isinvolved

Is there a way to autosize HTML table height based on content? Also if it's a cell (or cells) next to a neighbor cell with multiple rowspans.

E.g. if I have a table like this (cell on the right has Rowspan="2" and height of the cell content = 600px, in each cell on the left height of the cell content = 150px):

Cells evenly spaces

there is a gap between 2 cell consents on the left because cells themselves autosized their height. I'd like it to look like this:

Cell height adjusted to content

Where top cells automatically collapse to cell content height. Is there anyway to achieve this?

Answer

This sets the last row of cells to the correct height (demo):

function grow(td) {
    var table, target, high, low, mid;

    td = $(td);
    table = td.closest('table');
    target = table.height();
    low = td.height();

    // find initial high
    high = low;
    while (table.height() <= target) {
        td.height(high *= 2);
    }

    // binary search!
    while (low + 1 < high) {
        mid = low + Math.floor((high - low) / 2);
        td.height(mid);
        if (table.height() > target) {
            high = mid;
        } else {
            low = mid;
        }
    }

    td.height(low);
}

$('tr:last-child td').each(function() { grow(this); });

​ It should be trivial to convert this into plain JavaScript.


Update: For more complicated tables, you'll want to replace the last line with this (demo):

$.each($('td').get().reverse(), function() { grow(this); });

​ The idea is to call grow() on every cell, starting with the last row and working upwards.