<tr> slideUp/slideDown導致列寬跳轉

Question

我有一張表，點擊TR時，它會滑動打開以顯示更多數據。 問題是列寬「口吃」略有。

我發現的一個解決方案是爲每個列設置寬度，但我希望表格是流動的，而且我無法將寬度設置爲所有列。

HTML：

Click on a row for more info: 
<table> 
    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr> 
    <tr><td colspan="3"><p>Blah blah blah blah blah blah blah blah blah blah blah 
     blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
     blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p> 
    </td></tr> 

    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr> 
    <tr><td colspan="3"><p>Blah blah blah blah blah blah blah blah blah blah blah 
     blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
     blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p> 
    </td></tr> 

    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr> 
    <tr><td colspan="3"><p>Blah blah blah blah blah blah blah blah blah blah blah 
     blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
     blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p> 
    </td></tr>  
</table> 

CSS：

table{ width: 624px; border-collapse: collapse;} 
tr {border: 1px solid #AEAEAE;} 

JQuery的：

$(function() { 
    $("td[colspan=3]").find("p").hide(); 
    $("table").click(function(event) { 
     event.stopPropagation(); 
     var $target = $(event.target); 
     if ($target.closest("td").attr("colspan") > 1) { 
      $target.slideUp(); 
     } else { 
      $target.closest("tr").next().find("p").slideToggle(); 
     }      
    }); 
}); 

看到這個小提琴： http://jsfiddle.net/jcghqfau/1/

我已經嘗試了this問題中提出的解決方案，但它對列寬沒有幫助。 設置table-layout:fixed;解決了跳躍，但阻止我使用流體CSS。

注意：我需要一個跨瀏覽器解決方案，包括IE8以上。

Answer 1

嘗試添加以下樣式

td p { 
margin: 0 -1px; 
} 

我還添加了一個更新的樣本

http://jsfiddle.net/jcghqfau/4/