Responsive Tables

so many answers, none the same

[cnvi]

so I am used to working in WordPress and blocks for years where you can do things in WYSIWYG and I rarely look at the code.
But now I am working in an older ecommerce store (for a client who doesn't want to change platforms) running HTML5 and the editor has no support for responsive tables.

So dumb guy question here from someone who should know better... What is the best way to code a responsive table when you want 6 columns to show on desktop, 4 columns to show on tablet/ipad, and 1 or 2 columns to show on a smartphone? I know its a DIV solution but I have seen so many "solutions" online that don't actually work when I try it, thought I would ask you all experts for the answer.

I just need sample code and then I am experienced enough to fill in the cells. I just need the basic code to support what I described above. thanks in advance. and be safe and take care.

[lammert]

A "please do my homework" approach may not be the best way to get the optimal solution. What have you come up with so far?

[cnvi]

Ouch. I’ve done my homework ..would only reach out here as last resort.

As I said I found different code using DIVs but when I plug them into this ecommerce store platform they don’t render. I’ve tried abt 8 different “solutions” some new/ some published years ago.

I just want to know what’s the latest and best way to do this in HTML without scripts or fancy code. need a simple solution without just putting every cell in its own row which is the only solution i have found to work but obviously looks like crap on desktop.

Not asking anyone to do my homework i’ve been looking at this for weeks. Just want to know if any of you have encountered responsive tables into old platforms and what code you used that can be backwards compatible and also be search and user friendly.

I did not name the ecommerce platform my client is stuck with because i don’t think that’s allowed here but if it is I’ll tell u. trying to abide by the rules here.

[tangor]

There's tables and grids and divs, oh my.

Include viewport and percents (for columns) and go from there.

With no knowledge of the underlying DATA to populate the table there's not much any can do to help UNLESS YOU POST your best effort code so far.

Can't work in a vacuum.

[not2easy]

You can do this in a number of ways. One way is to use a div container as a table row, containing the number of cells you want and using media queries to tell the row div when to switch from display:table-row; to display:block; the cell container divs can also be assigned to display:table-cell; at desktop width and display:block; at mobile width.

If you're looking for sample code, I'd suggest to visit the w3schools site where they do show and tell tutorials and offer sample code.

[cnvi]

@not2easy.. that’s what i’ve tried but it just doesn’t render and the ecommerce platform is a loss for words - they literally have hundreds of customers w same problem according to their user forums.

As for media queries, I haven’t found a “template” or “standard” to do that and would welcome any simple suggestions.

Again I have 6 columns that could render desktop, 4 for tablet/desktop and obviously limited to 2 wide or 1 narrow column narrow for smartphone.

[not2easy]

they literally have hundreds of customers w same problem according to their user forums.

It sounds like sample code isn't going to help. If this problem is unique to their platform/templates your best bet might be to try 'mining' any other users' source code to see how they are dealing with it.

[JorgeV]

Hello,

running HTML5

Never heard about a site running HTML5 (irony)

[NickMNS]

What is the best way to code a responsive table when you want 6 columns to show on desktop, 4 columns to show on tablet/ipad, and 1 or 2 columns to show on a smartphone?

Before I start, you should be for warned that now Google use "Mobile First Indexing", this means that the mobile view of your website is what will be used for indexing and ranking. So if your 4 columns that will be hidden on mobile have content that is important you may not want to hide it.

If I understand not2easy's suggestion, what it does is continue to show the cells but wrapped, which is the right approach given my comment above.

If you really want to hide them give each cell of each column a class, eg: .col1, .col2, .col3. Then using your media queries set the class you want to hide to display:none.

[lucy24]

I know it’s a DIV solution

It doesn’t have to be. In the same way that you can say

div.myclass {display: table-cell;}

you can say

table.myclass tr {display: block; margin-top: 1em;}
table.myclass td {display: block; margin-left: 1em;}

and so on, making much use of nth-child selectors to give each successive cell a deeper indent--not too deep, of course, if you’re viewing on a small device! Put it inside an @media rule, depending on viewport width. I don't do this often, but have resorted to it a few times, mainly for multilingual text.

This is assuming the tables are genuine tables, showing information that is related in two directions, so a table is conceptually the correct solution. Caution: Validators tend to think tables can only contain numbers, and will yap about “tabular data” if instead there is text--for example, the same content in multiple languages. Ignore them.

[cnvi]

Thanks @Lucy24 that worked.