Organize your table with CSS styling

Question

Organize your table with CSS styling

Looking for a way to rearrange a table with 2 columns after every 2 rows so that the lines continue on the right side? Check out the example below:

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

Wondering if this can be achieved using only CSS?

Keep in mind, altering the HTML code is not an option. A solution that works in standard browsers would suffice.

UPDATE:
Feel free to view the Fiddle here.

Desiring to break the table after 9 rows (half).
For instance, breaking the table at 'strict2' line so that 'basic3' line is right next to 'basic.'

UPDATE 2:
As it turns out, achieving this through CSS alone is not feasible; therefore, I have opted for a JavaScript solution to rearrange the table.

css html

Answer 1

Answer №1

if the row count exceeds 9, you have the option to divide it and showcase the remaining rows in a new table

JavaScript:

$(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

Answer 2

if the row count exceeds 9, you have the option to divide it and showcase the remaining rows in a new table

JavaScript:

$(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

Organize your table with CSS styling

Answer №1

Similar questions

jQuery Function malfunctioning after initial click

What is the best way to adjust the size of a button using CSS within a ReactJS

Utilize the ::before selector to insert white spaces

What are some strategies for preventing the $window.alert function from being triggered within an AngularJS controller's scope?

Incorporating JavaScript and Alpine.js to Monitor and Log Changes in Input Range Values

Tips for resetting form fields and clearing previous values before resubmitting the form, allowing for a fresh start with empty fields

Setting the width of an SVG element to match the width of the <text> element inside it

Enhancing WordPress Icons for Parent and Child Elements

Navigating between two intervals in JavaScript requires following a few simple steps

Displaying default tab content while hiding other tab content in Javascript can be achieved through a simple code implementation

jQuery not refreshing properly

Maintain consistent width of a page across different mobile devices

Bypassing CORS/CORB restrictions in a React app without the need for a NodeJS/Express server

Developing a quiz using jQuery to load and save quiz options

SVG: Altering the dy attribute has no impact on the overall height of the bounding rectangle for the parent text

Tips for fixing the issue of disappearing top margins in elements while using CSS3 Pie in Internet Explorer 7

Unable to output value in console using eventListener

What is the process for updating a particular div element?

Adding Items to the Beginning of a Drop-down List using jQuery.prepend

Achieving dynamic HTML element addition through JavaScript while maintaining their record in PHP