Responsive table that converts to card layout


#1

Hi all

I’m trying to create a responsive table layout that on small screen sizes changes to more of a card layout.

On desktop I’d like the table layout to have columns that can have widths with min a max values and some that are responsive and so change when the window is resized.

I sort of have this working here

where I’m using display table to create and table structure and then removing it on mobile.

I can’t set min/max width values on the table but I don’t think thats possible on normal tables.

My questions is, is this the best way to do this. I’ve tried with flex but it seems more problematic.


#2

If the data is tabular (and that’s exactly what it looks like to me) then the answer is clear and you must use the html table element in its construction. Never (almost never) use elements that are not the best semantic choice for the job in hand just because it suits your coding purpose.

The problem is that it is not easy to render tables on small devices so designers often cheat and use the wrong elements for the job rather than working out the best way to present the data.

With a little duplication of the headers in data attributes you can make quite a respectable layout for small screen.

Here are a few examples that I knocked up for similar questions in the forums.


#3

You will have to explain what you are trying to do exactly before I can say whether its possible or not? You can certainly set min and max-width on the table as required css or html table.


#4

I certainly understand about using semantic elements but I’m just trying to get it to fit the design.

In my first demo the content on mobile is inline and wraps

I don’t think this is possible using tables


#5

Did you look at the pens @PaulOB posted?

Please explain if your goal is something else than the pens’ responsive table examples.


#6

That’s what I mean :slight_smile: Don’t let the design influence the elements you use. Use the right elements for the job in hand and then style them to fit the design.

Yes but it makes no sense at all (assuming this is tabular data) and all accessibility is lost to screen and keyboard users and assistive technologies. Look at the examples I gave you for smaller screens they are so much easier to read and still make sense of the data.

It certainly can do exactly the same as you wanted.

@media(max-width: 700px){
  thead{
    display: none;
  }
  tr{display:block}
  td{display:inline-block}
  td.image{float:left}
}

Although I’d probably use flex instead of block etc…


#7

Thanks PaulOB, how would you use flex instead of blocks


#8

I’m not on a computer to test at the moment but I would try setting the table to display block and the tr to display: flex and flex-wrap:wrap.

However the inline block approach above would work for what you mentioned.

In the end though I think you still need the approaches from my demos for best results.

Back tomorrow if you need further examples :slight_smile:


#9

PaulOB, your examples look really good and would work for future tables but at the moment I need it to look like this on mobile.

The td need to be inline apart from the first two which need to sit above and td cannot wrap underneath the image on the left when the screen gets smaller.

I think I can get it to work with a table but I think I need someway to group the first two td so I can place them on there own line.


#10

Hi,

I’m having a hard time envisaging how this is supposed to look.

This is what it looks like on my phone with the above code.

tableR

Is that the intended display?

It doesn’t look tabular anymore so I need a bit more information about the actual content before I start coding a table :slight_smile:

I’ll be back later as have to nip out for a few hours now :slight_smile:


#11

Yes, that will be the mobile view.

I think I nearly have it working, I’m sure it could be better.

The last thing I need to fix is the content wrapping underneath the image


#12

The easiest solution would be to set the image width as constant at the small size and then pad out the table to make a column and then drag the image across.

e.g. Add this to the end of your media query code.

table{display:block;padding-left:60px;}
.img {
	float: left;
	margin-right:0;
	margin-left:-55px;
}
.img img{width:50px;height:auto}

That will give a display like this:

tableR2

If you wanted variable sized images then you would probably need to apply a suitable bottom margin to the image (instead of the above changes) to stop stuff wrapping but of course will depend on the amount of content you are expecting.

I suggest you also test with real content and data as dummy content never shows up the nuances that real data does :slight_smile:


#13

This works thanks PaulOB but the table actually needs to be 100% width, sorry I should have made this clear at the start.

Fixing the image this way adds scrollbars to page and I cant see how I can add negative margins counter act the scrollbars


#14

Think I’ve fixed it but adding a wrapper giving that a right margin


#15

Just remove the width when you make it display:block. :slight_smile:

table{display:block;padding-left:60px;width:auto;}

A block (auto sized) element takes all available width unlike a table element.

Or box-sizing:border-box would have worked also.