Responsive table with top and side items

[libralion]

Hi everybody,
I have a large table on my website with items at the top and on the left side.
I read the various scripts on this site for responsive tables, but none of them seem to include what I need. Can somebody point me in the right direction?
I can’t write scripts or anything, but I know how to use them.
This is the page with the large table on it: http://www.patriciakaas.nl/english/albums-extended.htm
I also have a table with nothing on top. Just two cells really. How can I make this table responsive too? Here is the link: http://www.patriciakaas.nl/english/enfoires.htm

Johanna

[libralion]

Thanks Atelierbram! I think that will work. I will try it out. :)
I didn’t know in which forum to post this, so that is why I posted it here.
You have a solution for the second problem too maybe?
I also have a table with nothing on top. Just two cells really. How can I make this table responsive too? Here is the link: http://www.patriciakaas.nl/english/enfoires.htm

Johanna

[libralion]

Great! Will try that one too!
You are the best!

Johanna :)

[libralion]

Tried the first one, but get this: http://www.patriciakaas.nl/test.htm
What am I missing?

Johanna

[libralion]

Yes that does it. But you are right. I don’t know if I want this.
I also have problems with the other script.
I don’t get the years below each other like in your example.
Did I miss a setting or so?
http://www.patriciakaas.nl/test2.htm

Johanna

[libralion]

I see. I found that and then it works.
Thanks a lot for your help.
Now I only have to find a better way to display that table.

Johanna

[libralion]

Oh I see. Yes that could be something.
I will try and make that work tomorrow. Enough code for today. :)
Thanks a lot for all your help. Really appreciated!

Johanna

[libralion]

Hi Bram,
I added your code and attached the mobile css and js, but still I don’t get the right results.
What am I missing?
http://www.patriciakaas.nl/test.htm
Besides when I add the mobile css and js it messes up my entire page layout.
This is without the mobile css and js: http://www.patriciakaas.nl/test2.htm

Johanna

[libralion]

Yes that does it! But there are errors.
See for instance Frankrijk: Mademoiselle chante
And the layout is still messed up.

Johanna

[libralion]

I copied the code from the css and used that. I also changed the hide to hide-shift in the html, but now the data from the countries is all gone and the layout is still messed up.
http://www.patriciakaas.nl/test.htm

Johanna

[libralion]

Yes that did it. The data is back now.
The only thing is, that under “mademoiselle”, “le mot de passe” and “Kabaret” the data isn’t displayed well. I can’t figure out why that is. It is the same for all countries for those 3.
And I removed all the general styles in the style-table.css , but still the layout is messed up.
I use the incognito modus in the browser. That way the cookies etc. won’t be stored.
http://www.patriciakaas.nl/test.htm

Johanna

[libralion]

Yes I found it also. I just removed it from the custom.css, because I don’t need it on this page.
Now the only thing remaining is the layout that is messed up.
http://www.patriciakaas.nl/test.htm

Johanna

[libralion]

And I also notice, that it doesn’t display well on a smartphone etc.
You only get the list of albums and can’t view the results.
In a larger screen, like from the nexus it doesn’t look good.
http://www.responsinator.com/?url=http%3A%2F%2Fwww.patriciakaas.nl%2Ftest.htm
The purpose of all of this was to get a responsive table for all screens.

Johanna

[libralion]

Yes that brought back the layout. The only thing is that the menu is now inside the table, lol.
http://www.patriciakaas.nl/test.htm

Johanna

[libralion]

You are good! That did it!
It works now like it should. Thank you very much!
Any suggestions for the display on smartphones? I think anything above 640 width is now working good.
http://www.responsinator.com/?url=www.patriciakaas.nl%2Ftest.htm

Johanna

[Author]

Posts