bro bro - 4 years ago 154
HTML Question

Rearrange table in CSS

I have a table with 2 columns as sketched below. I want to rearrange/break the table e.g after 2 rows, so that the following lines continue on the right side.

[1][2] [1][2][5][6]
[3][4] => [3][4][7][8]

Is that possible in pure CSS?

Changing it in the HTML Code is not an option.
A solution running only in normal browsers would be acceptable.



I want to break the table after 9 rows (half).

In the example: Break after the line containing 'strict2' so that the line containing 'basic3' is right next to the line with 'basic'.


Since a solution in CSS is not possible, I use a JS solution to break the table.

Answer Source

you can split the row after count of 9 and then display the rest in a new table


$(document).ready(function () {
    var $secLevelTable = $(".secLevelTable");
    var splitBy = 9;
    var rows = $secLevelTable.find("tr").slice(splitBy);
    var $secondTable = $(".secLevelTable").parent().append("<table class='secondTable'><tbody></tbody></table>");


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download