jQuery Sortable applied to table rows makes rows taller_问答_开发者

jQuery Sortable applied to table rows makes rows taller

开发者 https://www.devze.com 2023-02-06 11:59 出处：网络

I\'m preparing a custom positioning for table rows with jQuery UI Sortable, but I\'ve run into a major problem. Whenever I grab a row, it gains about 2px height. However, the margin, height, padding e

I'm preparing a custom positioning for table rows with jQuery UI Sortable, but I've run into a major problem. Whenever I grab a row, it gains about 2px height. However, the margin, height, padding etc. remain the same. I've created a test page, without any additional scripts or styles. Is here anything I can do to prevent this rows getting taller issue from happening? Thanks.

jQuery: 1.4.4, jQuery UI: 1.8.9

Edit: this happes in Chrome and Safari (haven't tested other browsers) on Mac. This very example on jsFiddle works fine: http://jsfiddle.net/yA47C/, but I'm not quite sure what could be different there.

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>    
</head>

<body>
    <table>
        <thead>
            <tr><th>header</th></tr>
        </thead>
        <tbody class="sortable">
            <tr><td>row 1</td></tr>
            <tr><td>row 2</td></tr>
            <tr><td>row 3</td></tr>
            <tr><td>row 4</td></tr>
            <tr><td>row 5</td></tr>
        </tbody>
    </table> 
    <script> 
    $(function() {
        $(".sortable").sortable();
    });
    &l开发者_StackOverflowt;/script>
</body> 
</html>

I don't know what the problem is (since this works for me), but if it works for you in jsfiddle, it's definitely one of those css rules in normalize.css that's fixing it for you:

http://fiddle.jshell.net/css/normalize.css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset
input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;}

If I had to guess, I'd say it's the "table" rule. Could also be the "td" rule.