Altura de celda de la tabla HTML de tamaño automático en función del contenido cuando está involucrado rowspan

Question

¿Hay alguna manera de autoesificar la altura de la tabla HTML en función del contenido? También si se trata de una celda (o celdas) al lado de una celda contigua con filas múltiples.

E.g. si tengo una tabla como la siguiente (célula de la derecha tiene ROWSPAN = "2" y la altura del contenido de la celda = 600px, en cada celda de la altura izquierdo del contenido de la celda = 150 píxeles):

hay un espacio entre los permisos de 2 celdas de la izquierda porque las celdas autoescalan su altura. Me gustaría que se vea como esto:

donde los mejores células colapsan de forma automática a la altura del contenido de células. ¿Hay alguna forma de lograr esto?

Answer 1

Esto establece la última fila de celdas a la altura correcta (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); }); 

Debe ser trivial convertir esto en JavaScript simple.

---

Actualización: Para tablas más complicadas, tendrá que sustituir la última línea con esto (demo):

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

La idea es llamar grow() en cada célula, comenzando con la última fila y trabajando hacia arriba.

Answer 2

tabla considerando id = "mitabla" sería:

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

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

}); 

Answer 3

al final de la página crear un código javascript y dejar que lo haga por usted:

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

Answer 4

pienso es mejor crear así http://jsfiddle.net/miqdad/w9QYB/