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

Question

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

例如,如果我有这样的表(右边的单元格有Rowspan ="2",单元格内容的高度= 600px,则在单元格内容左侧高度的每个单元格中= 150px):

在左边的2个细胞同意之间存在间隙,因为细胞自身自动调整了它们的高度.我希望它看起来像这样:

顶部细胞自动折叠到细胞内容物高度.反正有没有实现这个目标？

Answer 1

这将最后一行单元格设置为正确的高度（演示）：

\n\n

function grow(td) {\n    var table, target, high, low, mid;\n\n    td = $(td);\n    table = td.closest(\'table\');\n    target = table.height();\n    low = td.height();\n\n    // find initial high\n    high = low;\n    while (table.height() <= target) {\n        td.height(high *= 2);\n    }\n\n    // binary search!\n    while (low + 1 < high) {\n        mid = low + Math.floor((high - low) / 2);\n        td.height(mid);\n        if (table.height() > target) {\n            high = mid;\n        } else {\n            low = mid;\n        }\n    }\n\n    td.height(low);\n}\n\n$(\'tr:last-child td\').each(function() { grow(this); });\n

\n\n

\xe2\x80\x8b\n将其转换为纯 JavaScript 应该很简单。

\n\n\n\n

更新：对于更复杂的表，您需要用以下内容替换最后一行（演示）：

\n\n

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

\n\n

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

\n