html table行等高,根据内容自动调整HTML表格单元格高度时行跨度参与(Autosize HTML table cell...

有没有办法来自动调整基于内容的HTML表格高度？ 此外，如果它的旁边有多个rowspans邻居小区的小区(或小区)。

例如，如果我有一个这样的表(在右侧单元具有ROWSPAN =“2”与单元含量= 600px的，在对细胞含量= 150像素的左侧高度每个单元的高度)：

有上，因为细胞本身自动调整大小它们的高度左侧2只细胞同意之间的间隙。 我想它看起来就像这样：

当顶部细胞自动折叠到单元格内容的高度。 反正有没有做到这一点？

Answer 1:

这台细胞正确的高度(的最后一行演示 )：

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()上的每一个细胞，从最后一排和向上的工作。

Answer 2:

考虑到表ID =“MYTABLE”这将是：

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

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

$(this).height(ContentHeight);

});

Answer 3:

在你的页面的最后创建一个javascript代码，让它为你做：

document.getElementById("idOfTd").style.height="100px";

Answer 4:

我觉得它更好地创造这样http://jsfiddle.net/miqdad/w9QYB/

文章来源: Autosize HTML table cell height based on content when rowspan is involved