涉及行跨度时，根据内容自动调整 HTML 表格单元格的高度

Question

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

例如如果我有这样的表格（右侧的单元格有 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

考虑到 table 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/