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

HTML Techniques: Flipping the Script - Writing Characters from Right to Left

Determining when a message has been ignored using php

Implementing the onEnded event handler for an HTML video element

Handling routerLink exceptions in Angular 2, 4, and 5

Creative ways to design the HTML5 `<meter>` tag

Cross-origin resource sharing (CORS) issue encountered while trying to play an mp

How can I make multiple elements change color when hovering with CSS?

What is the best way to save and reload a canvas for future use?

Expansive picture within a Bootstrap container

Tips for showcasing a table generated from various input types on a separate page after pressing the submit button

Troubleshooting: React CSS Transition Fails to Trigger on Exit and Entry

How can I adjust the container to fit the monitor's dimensions while still keeping the

Struggling to align the image elements accurately

Avoid loading external scripts from third-party sources such as JavaScript libraries, Bing Maps API, and Lighthouse performance tool

The issue with the sticky menu not functioning properly may be due to the use

Improved efficiency in CSS for left transition animations

Tips on changing font color within an email body in Outlook using a C#.NET Windows application

What is the correct way to align my checkboxes with their corresponding labels?

Adjusting Size of Picture and Text on Card

Retrieving the ID value and activating a click function for each link sharing a common class using jQuery