CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mcmwhfy
mcmwhfy

Reputation: 1686

Td height on two separate tables

I have two separate tables on which I use a focus+hover function on each tr that works great on both tables simultaneous, my problem is with td height because if the description of a td from fist table is greater will be displayed on two rows in the same td and the height of td will be modified but only into first table td. How is possible to remember the height to the td from first table and to add that on td from second table in order to have both td same size. In my example only first two tr are displayed ok the other two are displayed not ok because of description of first table td.

fiddle example: http://jsfiddle.net/Ksb2W/45/ 

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

http://mainpage.ueuo.com/

Thank you.

Upvotes: 7

Views: 4015

Answers (7)

Andrea Silvestri
Andrea Silvestri

Reputation: 1134

    $('#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());
});

Adding this to your fiddle resizes every row IF its corresponding is greater. In this case though you have to give your tables ids. Like in this fiddle: http://jsfiddle.net/Ksb2W/88/

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337550

If I've understood you correctly you want the heights within each row of both tables to be the same?

If so, this should work:

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

Obviously the use of :first and :last selectors is not ideal, you should amend those to be id selectors.

Example fiddle

UPDATE

The solution to the problem you've mentioned in your bounty is because of the border on the td elements not being accounted for.

Replace height() with outerHeight() when checking the current row and it should work fine:

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

Upvotes: 22

jeffery_the_wind
jeffery_the_wind

Reputation: 18158

Well I guess I am a little late, you can see button which fixes the height of the second table, here:

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

You can put that line of code in your document.ready function and it should do the trick:

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

It is also important to modify the CSS for the <td> elements with this property:

box-sizing:        border-box;

Here is a robust solution that will match all row heights of 2 tables specified by table id. 4 lines in document.ready function, no need to directly alter 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'));
});

See the fiddle here: http://jsfiddle.net/Ksb2W/55/

Upvotes: 2

rt2800
rt2800

Reputation: 3045

this will resize row height on the fly

$(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));
}

Upvotes: 2

gabitzish
gabitzish

Reputation: 9691

Add some id's on the tables and add this piece of code : 

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

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

Here is working jsFiddle: http://jsfiddle.net/Ksb2W/51/

Upvotes: 3

DangerMonkey
DangerMonkey

Reputation: 385

To do what you want, you could have only one table with an empty column with no border between the two part. That way, cell height will still be dynamic based on the content but will also expend all cells in the row from both sides of the table.

Upvotes: 2

Manse
Manse

Reputation: 38147

Get the max height of all the tr elements and then set the height of all the trs to this height :

// 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

(I think I may have mis-understood your question ... this will set the height of all the trs to the same height)

Upvotes: 3

Related Questions