7

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

例如，如果我有这样的表格（右侧的单元格有 Rowspan="2" 并且单元格内容的高度 = 600px，在左侧的每个单元格中单元格内容的高度 = 150px）：

单元格均匀间隔

左侧的 2 个单元格同意之间存在间隙，因为单元格本身会自动调整其高度。我希望它看起来像这样：

单元格高度调整为内容

顶部单元格自动折叠到单元格内容高度的位置。有没有办法做到这一点？

4

4 回答 4

2

这会将最后一行单元格设置为正确的高度（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 应该很简单。

更新：对于更复杂的表，您需要将最后一行替换为（演示）：

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

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

于 2012-06-12T21:36:49.037 回答
1

考虑到 table id="mytable" 它将是：

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

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

 });
于 2012-06-06T17:53:00.657 回答
0

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

于 2012-06-12T12:05:37.417 回答
0

在您的页面末尾创建一个 javascript 代码并让它为您执行此操作：

 <script type="text/javascript"> 
document.getElementById("idOfTd").style.height="100px";
</script>
于 2012-06-07T21:56:15.713 回答