Responsive Table Data Idea

RESET

Preface

---

One issue with table tag and table data in html is about the space they need for rendering data.

tables are not responsive in heart, and they might break your layout when they need more than space client view could support.

Hopefully one solution is moving from table to grid and try to make it responsive.

The Solution

My honor to share my idea and solution with you great developers, it's easy and simple.

Idea is simple, first we need to have a grid element to be used as table row. Let assume each row has 4 columns. Assuming following list as columns we like to have for our table:

1. Manf. Name
2. Awesomeness
3. Models
4. Origin

For having a css to serve 4 element inside horizontally(columns), we would use grid-template-columns attribute.

Columns Turns To Rows

When screen goes small, so your table/grid may need more data to render the data, and when they don't get enough space, you get broken layout.

Simply we would show the columns of the a row in each line, so it won't cause any issue as row will need less width, but more height.

Better we say, we turn out the table into 1 column table for mobile.

Desktop View

First let's have desktop view working, becasue it's the easiest part.

So we want a layout as table row to host four cells, easy, sounds like a easy job with grid.

Considering have a CSS rule for row, to display as grid, and comes as 4 elements as column(cell), this could be something liek following.

.row_grid{
    display:grid;
    grid-template-columns: 0.25fr 0.25fr 0.25fr 0.25fr;
}

Code snippet : Grid element with template of 4 column.

Just put some data on this grid element, and it will place them by 4 equal portion(cell), easy.

Mobile View

For mobile view, you need to turn that 4 column grid into 1 column grid, and simply a 1 column row is just a simple block.

So actually there is no any specific CSS for mobile part, but for mobile you should turn it into 4-column element.

Easy! just need one media query for desktop(or any size it looks good) and let it goes as 4-column row.

@media (min-width: 5.1in) {
.row_grid{
    display:grid;
    grid-template-columns: 0.25fr 0.25fr 0.25fr 0.25fr;
}
}

Code snippet : Media query to turn a CSS rule into a 4-column grid container.

Table Head

The first row of each table is usually about the column names(just like the list mentioned above). But when columns turn into rows, that top row about the column names became a little nonsense and redundant. So what's idea?

My idea is about hiding the top row about the column names when in mobile. You can hide an element very easy using display:none

NOTE: Hiding an elements using visibility:hidden will hide the element, but leave the element bounds on place.

Alright, so let's have a good table header row where it's there for desktop view, and it's gon for mobile view. Again we get some hand of media query for this.

.row_head{
    display:none;
    font-width:bold;
    font-size:1.1em;
}
@media (min-width: 5.1in) {
.row_head,.row_grid{
    display:grid;
    grid-template-columns: 0.25fr 0.25fr 0.25fr 0.25fr;
}
}

Code snippet : Media query to show table header in desktop view.

Cell/Data Legend

In mobile ,now there is no a row to specifies the column names, we would go for a very tricky way to show a very small legend that explain about the cell/data.

Just like we hide the table header row in mobile, we would show the small legend next to the cell/data.

The CSS part is easy, using the media query to show/hide the element in different views, considering.

.inline_hn{
font-size: 0.9em;
border: 1px dashed #00ce00;
background-color: #00ff004d;
border-radius: 0.3em;
padding: 0.1em 0.3em;
color: gray;
text-align:right;
font-family:monospace;
margin-right:0.5em;
}
@media (min-width: 5.1in) {
.inline_hn{
    display:none;
}
}

Code snippet : Media query to show cell/data legend in mobile view.

Row Border Splitter

Indeed having a line after each border to work as border between top and bottom row make the table more easier to read.

For both desktop and mobile, this could be great, all we need is a simple border bottom.

Please note the last row may not need that border bottom since it may overflow on table border and make the work a little not pro. The tip is using :last-child selector, very easy.

.row_grid{
    border-bottom:1px solid lime;
 }
.row_grid:last-child{
    border-bottom-width:0;
}

Code snippet : Border bottom for all rows except the last one.

Looks very easy, all rows come with border, except the last one. Cool.

Cell Border Splitter

Just like we give each row border bottom, we would give the cells right border too. Why not.

Exactly the same way we did for rows, it works for cell too. but remember for mobile there is no cell! so there is no border needed at right or left.

@media (min-width: 5.1in) {
.cell:nth-child(1n+2){
    border-left:1px solid lime;
}
}

Code snippet : Border left for all cells except the first one.

Odd/Even Cell Highlighting

To make the table even more easier to read is highlight the odd/even cells with another colour. So easy, we would get some hand of :nth-child selector for this.

.row_grid:nth-child(even){
    background-color:#0f03;
}

Code snippet : Highlighting even cells using nth-child(even).

Putting All Together

Now the final part, just add some more fancy CSS for your table, cell ,row and putting all together, considering.

See the Pen Responsive table idea by NULL_dev (@NULL_dev11) on CodePen.

Code snippet : Sampel responsive table idea

TL;DR Version

Open the codepen page and resize the page to see how does it work.

That's it, programming is easy, happy coding.