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/

slideUp / slideDown导致列宽跳跃

1 个答案: