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]
[5][6]
[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.

EDIT:

Fiddle.

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'.

EDIT2:

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

JS:

$(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>");
    $secondTable.find("tbody").append(rows);
    $secLevelTable.find("tr").slice(splitBy).remove();
});

UPDATED FIDDLE

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