​​が異なる内で操作する<tr>の

Question

次のことができるかどうか疑問に思っています。

私はテーブルに表示している '経費'のリストを持っています。 4列 - 金額、日付、場所、および内容

jQueryでクリック可能にして、その特定の費用をインラインで拡大してより詳細な説明を表示したいと考えていました。

私がしようとしているのは、クリックすると、 'tr'の内容を拡張情報を含む単一の 'td'で置き換えることです。問題は 'td'はテーブルの約4分の1にしか拡大しないということです。他の行の幅を維持しながら行全体に拡張する方法はありますか？

Answer 1

<td colspan="4"> ? 

Answer 2

ここで私は何をしますか。 Working Demo。これらのようなスタイルで

<table id="expenses"> 
<thead> 
    <tr> 
    <td>Amount</td> 
    <td>Date</td> 
    <td>Where</td> 
    <td>What</td> 
    </tr> 
</thead> 
<tbody> 
    <tr class='expense' id='expense-1'> 
    <td>$5.99</td> 
    <td>4/2/2009</td> 
    <td>Taco Bell</td> 
    <td>Chalupa</td> 
    </tr> 
    <tr class='details' id='details-1'> 
    <td colspan='4'> 
    It was yummy and delicious 
    </td> 
    </tr> 
    <tr class='expense' id='expense-2'> 
    <td>$4.99</td> 
    <td>4/3/2009</td> 
    <td>Burger King</td> 
    <td>Whopper</td> 
    </tr> 
    <tr class='details' id='details-2'> 
    <td colspan='4'> 
    The king of burgers, indeed! 
    </td> 
    </tr> 
    <tr class='expense' id='expense-3'> 
    <td>$25.99</td> 
    <td>4/6/2009</td> 
    <td>Olive Garden</td> 
    <td>Chicken Alfredo</td> 
    </tr> 
    <tr class='details' id='details-3'> 
    <td colspan='4'> 
    I love me some italian food! 
    </td> 
    </tr> 
</tbody> 
</table> 

：次のようになります

#expenses tr.expense { 
    cursor: pointer; 
} 
#expenses tr.details { 
    display: none; 
} 

そして持っJavascriptを：それを行う必要があります

$(function() { 
    $('tr.expense', '#expenses').click(function() { 
     var id = $(this).attr('id').split('-').pop(); 
     var details = $('#details-'+id); 
     if(details.is(':visible')) { 
      details.hide(); 
     } else { 
      details.show(); 
     } 
    }); 
}); 

。