draggable in tables

draggable in tables

I want make tr-elements draggable. That´s all does work. But the first tr-element within my tbody work wrong.
If i move this element above my table, the table heightened him self.

How can i solve this problem?

This is my code:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.   "http://www.w3.org/TR/html4/loose.dtd">
  3. <html lang="en">
  4. <head>
  5.     <title>Example</title>
  6.     <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
  7.     <script type="text/javascript" src="../../ui/ui.core.js"></script>
  8.     <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
  9.    
  10.     <style type="text/css">
  11.        #tbl_table tbody tr{
  12.            display: block;
  13.            cursor: pointer;
  14.        }
  15.     </style>
  16.     <script type="text/javascript">
  17.         $(function() {
  18.             $('#draggable1').draggable();
  19.             $('#draggable2').draggable();
  20.             $('#draggable3').draggable();
  21.             $('#draggable4').draggable();
  22.         });
  23.     </script>
  24. </head>
  25. <body>
  26.     <table id="tbl_table" border="1">
  27.         <thead>
  28.         <tr>
  29.             <th>Title 1</th>
  30.         </tr>
  31.         </thead>
  32.         <tbody id="tbl_table1_tbody">
  33.         <tr id="draggable1">
  34.             <td>I leave at home</td>
  35.         </tr>
  36.         <tr id="draggable2">
  37.             <td>Hello World 1</td>
  38.         </tr>
  39.         <tr id="draggable3">
  40.             <td>Hello World 2</td>
  41.         </tr>
  42.         <tr id="draggable4">
  43.             <td>Hello World 3</td>
  44.         </tr>
  45.         </tbody>
  46.     </table>
  47. </body>
  48. </html>