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

Posted 2023-03-05

【中文标题】涉及行跨度时，根据内容自动调整 HTML 表格单元格的高度

【英文标题】：Autosize HTML table cell height based on content when rowspan is involved

【发布时间】：2012-06-10 18:26:06

【问题描述】：

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

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

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

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

【问题讨论】：

您是使用 jquery（或任何其他 javascript 框架）还是仅使用 javascript？

纯 JS。但我不认为直接高度分配会在这种情况下调整单元格的大小

直接单元格对齐可以，但问题是，如果你知道有多少单元格（编写代码）或者单元格是动态创建的。

表格/单元格是动态创建的（从服务器端代码），但这应该不是问题。但看起来高度分配不起作用，即使我直接尝试了 $get('idOfTd').height='100px';或 $get('idOfTd').style.height='100px';它在视觉上对单元格高度没有影响（DOM 确实反映了属性变化）。

我认为通过给内容的控制负下边距我可以将其下方的单元格向上移动（例如 $get('xContentDiv').marginBottom = '-100px'），但我无法找出正确的值边距 - 看起来它会根据列中的单元格数量而变化

【参考方案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()，从最后一行开始向上工作。

【讨论】：

看起来很有希望，谢谢！当我拿到我的开发笔记本电脑时会测试它

仍在尝试将其移至普通 JS。如果表格布局更复杂一点，这会起作用吗？它总是有 2 列，但有些单元格可以跨越两列，而不是一个，而是更多的单元格可以跨越多行。

再次感谢您的出色解决方案。如果有人需要纯 JavaScript 版本，我将其发布在 codecorner.galanter.net/2012/06/13/…

【参考方案2】：

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

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

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

 );

【讨论】：

感谢您的及时回复。我们不使用 jQuery；我可以在普通的 JavaScript 中做同样的事情，但我不认为简单地为单元格分配高度值在这种情况下会起作用。还是我错了？

您好，您对这个问题有任何更新吗？我被卡住了:(

【参考方案3】：

在您的页面末尾创建一个 javascript 代码并让它为您完成：

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

【讨论】：

你试过了吗？它实际上是否明显降低了 IE 或 FireFox 中左上角单元格的高度？

如果不是太麻烦的话 - 你能附上一个工作样本吗？包括带有行跨度的表格的 HTML 标记和减少跨跨单元旁边顶部单元格高度的代码。非常感谢！

【参考方案4】：

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

【讨论】：

是的，我遇到过 table-in-table 解决方案，但目前表格布局是由服务器端代码生成的，更改它需要付出不小的努力。我需要找到一个适用于现有布局的客户端解决方案。

能否请您发布您在浏览器查看源代码中获得的代码

嗨，基本的看起来像这样：jsfiddle.net/r3pLC，它总是有 2 列，但可能更复杂 - 一些单元格可以跨越 2 列，更多其他单元格可以跨越多行等. 任何时候单元格跨越多行的要求 - 它的邻居的内容必须顶部对齐并靠在一起