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

请看这个 fiddle : http://jsfiddle.net/jcghqfau/1/

我已经尝试了 this 中建议的解决方案问题，但这对列宽没有帮助。 设置 table-layout:fixed; 解决了跳跃但阻止我使用流体 css。

注意:我需要一个跨浏览器的解决方案，包括 IE8 及更高版本。

Answer 1

尝试添加以下样式

td p {
 margin: 0 -1px;
}

我还添加了一个更新的示例

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