Question

I have two tables side by side, how do i make the the column heights for both tables are identical using jQuery? They both have the same amount of rows. and the content of table is created dynamically. So the height may vary.

<div class="row">
  <div class="span2 pull-left">
    <table class="table table-bordered pull-left" id="compare-tbl-1" border="1">
      <thead>
        <th>Column 1</th>
      </thead>
      <tbody>
        <tr>
          <td>Row1</td>
        </tr>
        <tr>
          <td>Row2</td>
        </tr>
        <tr>
          <td>Row3</td>
        </tr>
        <tr>
          <td>Row4</td>
        </tr>
        <tr>
          <td>Row5</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="span10 pull-right">
    <table class="table table-bordered" id="compare-tbl-2">
      <thead>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          <th>Column 4</th>
          <th>Column 5</th>
      </thead>
      <tbody>
        <tr>
          <td>Row1 Column1</td>
          <td>Row1 Column2</td>
          <td>Row1 Column3</td>
          <td>Row1 Column4</td>
          <td>Row1 Column5</td>
        </tr>
        <tr>
          <td>Row2 Column1</td>
          <td>Row2 Column2</td>
          <td>Row2 Column3</td>
          <td>Row2 Column4</td>
          <td>Row2 Column5</td>
        </tr>
        <tr>
          <td>Row3 Column1</td>
          <td>Row3 Column2</td>
          <td>Row3 Column3</td>
          <td>Row3 Column4</td>
          <td>Row3 Column5</td>
        </tr>
        <tr>
          <td>Row4 Column1</td>
          <td>Row4 Column2</td>
          <td>Row4 Column3</td>
          <td>Row4 Column4</td>
          <td>Row4 Column5</td>
        </tr>
        <tr>
          <td>Row5 Column1</td>
          <td>Row5 Column2</td>
          <td>Row5 Column3</td>
          <td>Row5 Column4</td>
          <td>Row5 Column5</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Basically, Row1 in table1 must be the same as Row1 in table2, row2 = row2, row3 = row3 and so on. table1 follows table2’s height

My code is here http://jsfiddle.net/Q4tLX/8/

Answer 1

Try this:

$('#compare-tbl-1 tr').each(function(){
    var i = $('#compare-tbl-1 tr').index($(this));
    if($(this).outerHeight() > $('#compare-tbl-2 tr:eq('+i+')')){
        $('#compare-tbl-2 tr:eq('+i+') td').css('height',$(this).outerHeight());
    } else {
        $(this).children().css('height',$('#compare-tbl-2 tr:eq('+i+')').outerHeight());
    }
});

Demo – http://jsfiddle.net/PVZw7/