涉及到rowspan时，根据内容自动调整HTML表格单元格高度 [英] Autosize HTML table cell height based on content when rowspan is involved

问题描述

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

例如，如果我有这样一个表（右边的单元格的Rowspan =2，单元格的高度= 600px，单元格左边高度的每个单元格内容= 150px）：

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

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

解决方案

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

 函数增长（td）{
 var table，target，high，low，mid; 
 
 td = $（td）; 
 table = td.closest（'table'）; 
 target = table.height（）; 
 low = td.height（）; 
 
 //找到最初的
高=低; 
 while（table.height（）<= target）{
 td.height（high * = 2）; 
} 
 
 //二进制搜索！ $（低+ 1 <高）{
 mid =低+数学地板（（高 - 低）/ 2）; 
 td.height（mid）; 
 if（table.height（）> target）{
 high = mid; 
} else {
 low = mid; 
} 
} 
 
 td.height（低）; 
 
 
'（'tr：last-child td'）。each（function（）{grow（this）;}）; 
  

将它转换为普通的JavaScript应该是微不足道的。

---

更新：对于更复杂的表格，您需要用此替换最后一行（ demo ）：

  $。each（$（'td'）。get（）。reverse（），function（）{grow（this）;}）; 
  

这个想法是调用 grow（） code>，从最后一行开始并向上工作。

Is there a way to autosize HTML table height based on content? Also if it's a cell (or cells) next to a neighbor cell with multiple rowspans.

E.g. if I have a table like this (cell on the right has Rowspan="2" and height of the cell content = 600px, in each cell on the left height of the cell content = 150px):

there is a gap between 2 cell consents on the left because cells themselves autosized their height. I'd like it to look like this:

Where top cells automatically collapse to cell content height. Is there anyway to achieve this?

解决方案

This sets the last row of cells to the correct height (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); });

​ It should be trivial to convert this into plain JavaScript.

---

Update: For more complicated tables, you'll want to replace the last line with this (demo):

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

​ The idea is to call grow() on every cell, starting with the last row and working upwards.

这篇关于涉及到rowspan时，根据内容自动调整HTML表格单元格高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！