当涉及到 rowspan 时，根据内容自适应HTML表格单元格高度

Question

当涉及到 rowspan 时，根据内容自适应HTML表格单元格高度

htmlhtml-tablecell

7

有没有一种方法可以根据内容自动调整 HTML 表格的高度？如果它是与具有多个行跨度的相邻单元格（或单元格）相邻的单元格。

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

[图片]

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

[图片]

其中顶部单元格自动折叠到单元格内容高度。有没有办法实现这一点？

- Yuriy Galanter

直接单元格对齐是可行的，但问题在于，如果您不知道有多少单元格（以编写代码）或单元格是动态创建的。 - Ashkan Mobayen Khiabani

表格/单元格是动态创建的（来自服务器端代码），但这不应该是一个问题。但看起来高度分配不起作用，即使我尝试了一些直接的东西，比如$get('idOfTd').height='100px';或者$get('idOfTd').style.height='100px';在可视化上对单元格高度没有影响（DOM 反映了属性更改）。 - Yuriy Galanter

我发现通过给内容控件设置负底边距，可以将其下方的单元格上移（例如：$get('xContentDiv').marginBottom = '-100px'），但我无法确定正确的边距值——它似乎会根据列中单元格的数量而改变。 - Yuriy Galanter

尝试通过将 TD 高度设置为 1 进行黑客攻击 - 也没有起作用。任何帮助都将不胜感激。 - Yuriy Galanter

在您的页面末尾创建一个 JavaScript 代码，让它为您执行。 - Ashkan Mobayen Khiabani

显示剩余3条评论

4个回答

1

考虑到表格id="mytable"，应该是：

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

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

 });

- Ashkan Mobayen Khiabani

感谢您的迅速回复。我们不使用jQuery；我可以在普通的JavaScript中完成相同的操作，但我认为仅仅将高度值分配给单元格在这种情况下行不通。或者我错了吗？ - Yuriy Galanter

你好，你有关于这个问题的任何更新吗？我卡住了 :( - Yuriy Galanter

0

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

- Miqdad Ali

是的，我已经接触过嵌套表格的解决方案，但目前表格布局是由服务器端代码生成的，更改它需要付出很大的努力。我需要找到一个客户端解决方案，可以与现有的布局配合使用。 - Yuriy Galanter

请问您能否发布一下您在浏览器查看源代码时得到的代码？ - Miqdad Ali

嗨，基本的样式看起来像这样：http://jsfiddle.net/r3pLC，它总是有两列，但可能会更复杂 - 一些单元格可以跨越2列，其他单元格可以跨越多行等。要求是如果任何单元格跨越多行，则其相邻单元格的内容必须顶部对齐并紧密在一起。 - Yuriy Galanter

0

在你的页面末尾创建一个JavaScript代码，让它为你完成这个任务：

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

- Ashkan Mobayen Khiabani

你试过了吗？它是否真的可以在IE或FireFox中可见地减小左上角单元格的高度？ - Yuriy Galanter

请问能否提供一个可用的示例？包括带有rowspan属性的HTML表格标记和减小跨列单元格旁边顶部单元格高度的代码。非常感谢！ - Yuriy Galanter

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeffery To · Accepted Answer

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

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()，从最后一行开始逐行向上执行。