Скачать или смотреть Split a Span List into Multiple Horizontal Tables Using CSS

Discover how to effectively split span elements into organized horizontal tables using CSS Grid display and the nth-child pseudo-class.
---
This video is based on the question https://stackoverflow.com/q/67027610/ asked by the user 'sy-huss' ( https://stackoverflow.com/u/2947726/ ) and on the answer https://stackoverflow.com/a/67028297/ provided by the user 's.kuznetsov' ( https://stackoverflow.com/u/13573444/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Split a span list into multiple horizontal table using CSS - is it possible?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Split a Span List into Multiple Horizontal Tables Using CSS

When working with HTML documents, it’s not uncommon to find data structured in a way that isn’t optimal for display. In this post, we'll address a common challenge: splitting multiple <span> elements into organized horizontal tables whenever a specific class is encountered.

The Problem at Hand

Imagine you have a large HTML file containing various <span> elements. Despite the messy structure, you want to present the information more clearly by arranging the content into horizontal boxes. Specifically, you need to encapsulate the data every time a span has the class entity. The question is: Is it possible to achieve this solely through CSS?

Let's take a look at the structure of the spans and the desired output. For instance, you may want the following format:

[[See Video to Reveal this Text or Code Snippet]]

The challenge arises from displaying the elements in a structured, visually appealing manner without changing the underlying HTML.

The Solution: Using CSS Grid

To transform the array of spans into horizontal tables, we can leverage CSS Grid. This modern layout system allows for a flexible and efficient arrangement of elements on a webpage.

1. Set Up the Grid Display

First, we need to define a grid container. Here's how to set it up:

[[See Video to Reveal this Text or Code Snippet]]

display: grid; - This tells the browser to render the children of the <div> as grid items.

grid-auto-flow: dense; - This makes the grid fill in gaps more effectively, optimizing the use of space.

gap: 10px; - This creates space between the grid items, enhancing readability.

2. Assigning Grid Columns

Next, you’ll employ the :nth-child() pseudo-class to divide the spans into two columns. Here’s the detailed breakdown:

[[See Video to Reveal this Text or Code Snippet]]

:nth-child(-n + 12) - This targets the first 12 spans, placing them in the first column.

:nth-child(n + 13) - This targets spans starting from the 13th onward, situating them in the second column.

3. Stylize Each Span

To enhance the appearance of each span box, add some basic styles like borders and padding:

[[See Video to Reveal this Text or Code Snippet]]

Example: Final HTML Structure

Here’s how the HTML would look like, encapsulated in a <div> with the respective spans:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By utilizing the CSS Grid system along with the :nth-child() pseudo-class, you can efficiently arrange <span> elements into structured and user-friendly horizontal tables. This approach enables you to format data elegantly while only relying on CSS, making it a robust solution to display challenges in HTML documents.

With these tools at your disposal, the next time you face a similar problem, you’ll be well-prepared to tackle it with ease!