Distribute table columns equally over the page

Question

I have a content placed in a table:

<table class="table table-hover" id="anliegenGrammatik"></table>

and this is my jQuery where I have AJAX request and using the response I populate (append) the table above.

success: function(response) {
    $.each(response, function(index) {
        $.each(response[index].synonyms, function(index2) {
            $('#anliegenGrammatik').append('<tr> <td>' + response[index].synonyms[index2] + '</td> </tr>');
        });
    });
},

But it has a lot of data and like this it produces several hundred rows. How can I make in jQuery that it distributes columns and rows equally over the page. For example, instead of having one <tr> with 100 <td> s, I would like to have 4 <tr> and 25 <td> s in each row.

Is this even possible?

Answer 1

 success: function(response) { $.each(response, function(index) { var item = 1; var totalItems = response[index].synonyms.length; var numRows = 4; // number of rows var cellsRow = Math.floor(totalItems/numRows); // number of cells per row var cells = ''; $.each(response[index].synonyms, function(index2) { cells += '<td>' + response[index].synonyms[index2] + '</td>'; if((item % cellsRow == 0) || item == totalItems) { $('#anliegenGrammatik').append('<tr>'+cells+'</tr>'); cells = ''; } item ++; }); }); },