jQuery Sortable applied to table rows makes rows taller
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.
加载中,请稍侯......
精彩评论