Altura Td en dos tablas separadas

Question

Tengo dos tablas separadas en las que utilizo una función foco + desplazamiento en cada tr que funciona bien en ambas tablas simultáneamente, mi problema es con la altura td porque si la descripción de un td desde la mesa es mayor se mostrará en dos filas en el mismo td y la altura de td se modificará pero solo en la primera tabla td. ¿Cómo es posible recordar la altura del td de la primera tabla y agregar eso en td de la segunda tabla para tener ambos td del mismo tamaño? En mi ejemplo, solo se muestran los primeros dos tr, los otros dos se muestran incorrectos debido a la descripción de la primera tabla td.

ejemplo violín: http://jsfiddle.net/Ksb2W/45/

for bounty please check this example to see the difference on chrome and ie8: 

http://mainpage.ueuo.com/

Gracias.

Answer 1

Si lo he entendido correctamente, quiere que las alturas dentro de cada fila de ambas tablas sean las sam ¿mi?

Si es así, esto debería funcionar:

$("table:first tr").each(function(i) { 
    $("table:last tr").eq(i).height($(this).height()); 
}); 

Obviamente, el uso de :first y :last selectores no es lo ideal, se debería modificar los selectores ser id.

Example fiddle

---

ACTUALIZACIÓN

La solución al problema que usted ha mencionado en su abundancia es debido a la frontera de los elementos td no se contabiliza.

Reemplazar height() con outerHeight() al comprobar la fila actual y que debería funcionar bien:

$("table:first tr").each(function(i) { 
    $("table:last tr").eq(i).height($(this).outerHeight()); 
}); 

Answer 2

obtener la altura máxima de todos los tr elementos y luego ajustar la altura de todas las tr s a esta altura:

// get all heights 
var heights = rows.map(function() { 
    return $(this).height(); 
}).get(); 

// use max to get the max ! 
var maxHeight = Math.max.apply(null, heights); 

// set the height 
rows.height(maxHeight); 

Working Example

(creo que puede tener mal entendido su pregunta ... esto establecerá la altura de todos los tr s a la misma altura)

Answer 3

para hacer lo que desea, usted podría tener sólo una tabla con una columna vacía sin la frontera entre las dos partes. De esta forma, la altura de la celda seguirá siendo dinámica en función del contenido, pero también gastará todas las celdas de la fila desde ambos lados de la mesa.

Answer 4

añadir un poco de identificación en las mesas y añadir esta pieza de código:

var rows1 = $("#first tr"); 
var rows2 = $("#second tr"); 

rows1.each(function() { 
    $(rows2[$(this).index()]).height($(this).height());   
}) 

Aquí está trabajando jsFiddle: http://jsfiddle.net/Ksb2W/51/

Answer 5

esto va a cambiar el tamaño de altura de la fila sobre la marcha

$(function(){ 
    var rows = $('.interactive tr'); 

    rows.click(function() { 
     var i = $(this).GetIndex() + 1; // nth-child is 1-based 

     rows.removeClass('selectedRow'); 
     rows.filter(':nth-child(' + i + ')').addClass('selectedRow').height($(this).children('td')[0].offsetHeight); 
    }); 

    rows.hover(function(){ 
     var i = $(this).GetIndex() + 1; 
     rows.filter(':nth-child(' + i + ')').addClass('hoverx').height($(this).children('td')[0].offsetHeight);; 
    },function(){   
     rows.removeClass('hoverx'); 
    }); 
}); 

jQuery.fn.GetIndex = function(){ 
    return $(this).parent().children().index($(this)); 
} 

Answer 6

Bueno Supongo que estoy un poco tarde, puedes ver el botón que arregla la altura de la segunda tabla, aquí:

http://jsfiddle.net/Ksb2W/54/

Usted puede poner esa línea de código en su función document.ready y debe hacer el truco:

$(function(){ 
    $('#c').attr('height', $('#b').css('height')); 
}); 

También es importante modificar las reglas CSS de los elementos con <td> esta propiedad:

box-sizing:  border-box; 

Aquí es una solución robusta que coincidirá con todas las alturas de las filas de 2 mesas especificados por id mesa. 4 líneas en función de document.ready, sin necesidad de alterar directamente css:

$('td').css('box-sizing','border-box'); 
$('#t2').children().children().each(function(i, value) { 
    $(this, ':nth-child(1)').attr('height', $('#t1').children().children(':nth-child(' + parseInt(i + 1) + ')').css('height')); 
}); 

Ver el violín aquí: http://jsfiddle.net/Ksb2W/55/

Answer 7

$('#t1 tr').each(function(i) { 
    if ($(this).height() > $('#t2 tr:nth-child(' + (i + 1) + ')').height()) 
     $('#t2 tr:nth-child(' + (i + 1) + ')').height($(this).height()); 
    else if ($(this).height() < $('#t2 tr:nth-child(' + (i + 1) + ')').height()) 
     $(this).height($('#t2 tr:nth-child(' + (i + 1) + ')').height()); 
}); 

Añadiendo esto a su violín cambia el tamaño de cada fila si su correspondiente es mayor. En este caso, sin embargo, debe proporcionar los ID de sus tablas. Al igual que en este violín: http://jsfiddle.net/Ksb2W/88/