如果可能的话，“打破”表格丝毫的 css

Question

I have table that is dynamically created by pulling data from SQL DB with VBscript and then forwarded to HTML with AJAX and JQuery.

This is how my HTML looks:

    <table width="100%" style="border-collapse: collapse;">
       <tr bgcolor="#FF9933" > 
         <td width="50%" style="border-right:solid 1px black">TD 1</td>
         <td width="50%">TD 2</td>
       </tr>
  </table>
    <table id="UpdatePanel" width="100%" style="border-collapse: collapse;">
      </table>

Table with id "UpdatePanel" is filled with Data that is dynamically pulled whit ajax.

The tables: This is how my table looks and how the data is shown

This is how i want it to look, i want to "break" it after lets say 26-27 rows

I don't know if you can accomplish this just with CSS or CSS and JQuery or with something else.

Answer 1

This isn't something CSS can do, cleanly at least. I recommend splitting the data after ajax success and creating multiple tables.

function createTables(data){
     var $tr = $(data)    
     var size = 26;
     while($tr.length > 0){
        var table = $('<table></table>').append($tr.splice(0,size))
        $('body').append(table)
     }
}

And then float:left or display:inline-block on your tables.

example: https://jsfiddle.net/guanzo/rw59c65b/