jquery ui dialog with large table dataset

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<input type="submit" class="triggerModal" value="trigger modal" />
<br/>
<div id="modal" style="display:none;">      
    <div style="height: 325px; width: 400px; overflow: scroll; overflow-x: hidden;">      
<table id="modal-table-content">
            <tbody>
                    <tr>
                        <td>
                            <input type="checkbox" value="0"/>
                        </td>
                        <td>
                            <input type="text" value="0"/>
                        </td>
                        <td>
                            0
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" value="1"/>
                        </td>
                        <td>
                            <input type="text" value="1"/>
                        </td>
                        <td>
                            1
                        </td>
                        <td>
                            100
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" value="2"/>
                        </td>
                        <td>
                            <input type="text" value="2"/>
                        </td>
                        <td>
                            2
                        </td>
                        <td>
                            200
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" value="3"/>
                       ...

CSS

#wrapper{margin:10px;}

JavaScript

$(function () { 
            $('#modal').dialog({
                width: 425,
                height: 400,
                autoOpen: false,
                draggable: false,
                resizable: false
            });
    
        $('.triggerModal').click(function () {
            $('#modal').dialog('open');
        });            
});
(function(){

    for(i=21; i < 2700; i++){
       $('#modal-table-content').append('<tr><td><input type="checkbox" value="'+i+'"/></td><td><input type="text" value="'+i+'"/></td><td>'+i+'</td><td>'+i+'00</td></tr>'); 
    }   

})();