在涉及rowspan时，根据内容自动调整HTML表格单元格高度

Question

有没有办法根据内容自动调整HTML表格高度？此外，如果它是一个具有多个行扫描的相邻单元格旁边的单元格（或单元格）。

E.g。如果我有这样的表（右边的单元格有Rowspan =“2”，单元格内容的高度= 600px，则在单元格内容左侧高度的每个单元格中= 150px）：

左边的2个细胞同意之间存在差距，因为细胞自身自动调整了它们的高度。我希望它看起来像这样：

顶部单元格自动折叠到单元格内容高度。反正有没有实现这个目标？

Answer 1

这会将最后一行单元格设置为正确的高度（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); });

将它转换为纯JavaScript应该是微不足道的。

---

更新：对于更复杂的表格，您需要将最后一行替换为此demo）：

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

我们的想法是在每个单元格上调用grow()，从最后一行开始向上工作。

Answer 2

考虑表id =“mytable”，它将是：

    $("#mytable").find("td").each(function(){ 

    var ContentHeight = $($(this).html()).height();
    $(this).height(ContentHeight);

 });

Answer 3

在您网页的末尾创建一个javascript代码并让它为您完成：

 <script type="text/javascript"> 
document.getElementById("idOfTd").style.height="100px";
</script>

Answer 4

我认为最好像这样创建http://jsfiddle.net/miqdad/w9QYB/