Populate an HTML table with information arranged by column

Question

Populate an HTML table with information arranged by column

I have a dataset that needs to be presented in a grid format that adjusts based on the size of the screen.

The data is arranged alphabetically, and I prefer to showcase it column by column for better readability:

|---------|--------|--------|
| Abi     | Donald | George |
| Boris   | Ernest | Harold |
| Charlie | Frank  | Ivan   |

When viewed on a wider desktop viewport, it might appear like this:

|-------|---------|--------|--------|------|
| Abi   | Charlie | Ernest | George | Ivan |
| Boris | Donald  | Frank  | Harold |      |

Since the table is responsive, the number of columns (and subsequently rows) could vary. While Twitter Bootstrap makes it easy to achieve responsiveness using .col-md-3, I want my table to populate vertically, by column.

Is there a way to accomplish this only with CSS without resorting to reordering and calculating with Javascript?

css html-table

Answer 1

Answer №1

Here is a simple way to achieve this using Bootstrap:

<div class="myItems col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <ul>
        <li>Apple</li> 
        <li>Banana<li> 
        <li>Cherry</li>
    </ul>
</div>

If you prefer the opposite layout, you can try:

<div class="myItems col-lg-12 col-md-6 col-sm-3 col-xs-6">
    <ul>
        <li>Apple</li> 
        <li>Banana<li> 
        <li>Cherry</li>
    </ul>
</div>

Don't forget to add the following styles in your CSS:

.myItems ul{display:block;}
.myItems li{display:inline-block;}

Answer 2

Here is a simple way to achieve this using Bootstrap:

<div class="myItems col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <ul>
        <li>Apple</li> 
        <li>Banana<li> 
        <li>Cherry</li>
    </ul>
</div>

If you prefer the opposite layout, you can try:

<div class="myItems col-lg-12 col-md-6 col-sm-3 col-xs-6">
    <ul>
        <li>Apple</li> 
        <li>Banana<li> 
        <li>Cherry</li>
    </ul>
</div>

Don't forget to add the following styles in your CSS:

.myItems ul{display:block;}
.myItems li{display:inline-block;}

Populate an HTML table with information arranged by column

Answer №1

Similar questions

Is there a way to get rid of the tiny black line beside the Instagram icon?

creating nested columns within a parent column using flexbox techniques

Is it achievable to use PHP to automatically scroll to the bottom of a container?

Place CSS elements in relation to the underlying element

Setting the height of a webpage element to match the height of the window through CSS

Combining Images with Jquery: A guide to layering multiple images on top of each other

Is there a way to have these slides repeat automatically?

Struggling with creating a fluid/elastic/liquid layout in HTML. Can someone please assist me with this

Unique style pattern for parent links with both nested and non-nested elements

Customize the appearance of disabled dates in the eonasdan-datetimepicker styling

Ensure that the table is padded while keeping the cells collapsed

Using Bootstrap 4 to split lengthy text into multiple columns, similar to how it is done in Microsoft Word

Create a CSS dropdown menu design similar to the one shown in the image

Make individual term span the entire width of 100%

Setting the second tab as the primary active tab

What could be causing the last LI to drop onto a new line when floating UL to the right?

What is the best way to horizontally center a div that has position:absolute within a table

Experiencing problems with various React Carousel libraries when it comes to displaying

mobile screens causing bootstrap columns to overlap

As I spun four images along the outer edge of a circular border, one image came to a halt at 90 degrees, revealing its content. Now, I am looking to enlarge that particular